https://clbiwiki.com/api.php?action=feedcontributions&feedformat=atom&user=Nxdsxn
COASTLINE: BLACK ICE - 사용자 기여 [ko]
2026-06-03T09:10:57Z
사용자 기여
MediaWiki 1.41.5
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2485
미디어위키:Common.js
2026-06-03T09:06:36Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.removeAttribute('style');<br />
});<br />
}<br />
<br />
function getSystemDocOutputForShell() {<br />
return document.querySelector('.liberty-content-main .mw-parser-output');<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = getSystemDocOutputForShell();<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function ensureSystemDocSourceViewerForShell() {<br />
var output = getSystemDocOutputForShell();<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return null;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return null;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.appendChild(viewer);<br />
}<br />
<br />
fallbackText = source.textContent || '';<br />
<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
return viewer;<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var viewer;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
/*<br />
시스템 문서 뷰어가 이미 만들어져 있고 raw 원문도 로드된 상태라면<br />
다시 source 탐색/숨김/스타일 재적용을 하지 않는다.<br />
DevTools Elements 패널에서 body가 계속 파랗게 깜빡이던 원인은<br />
MutationObserver가 이 재적용을 반복해서 DOM attribute mutation을 만들었기 때문이다.<br />
*/<br />
if (<br />
viewer &&<br />
viewer.getAttribute('data-clbi-raw-title') === pageName &&<br />
viewer.getAttribute('data-clbi-raw-loaded') === '1'<br />
) {<br />
return;<br />
}<br />
<br />
viewer = ensureSystemDocSourceViewerForShell();<br />
if (!viewer) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || currentScrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (!row) {<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = getSystemDocOutputForShell();<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
type = row.querySelector('.clbi-system-doc-type');<br />
title = row.querySelector('.clbi-system-doc-title');<br />
<br />
if (type) type.textContent = ext;<br />
if (title) title.textContent = pageName;<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function (mutations) {<br />
var i;<br />
var target;<br />
<br />
/*<br />
시스템 CSS/JS 문서는 applyPageShellClasses()가 초기에 한 번<br />
인디케이터와 source viewer를 만든 뒤에는 MutationObserver가 다시<br />
같은 렌더링을 반복할 필요가 없다. 이 반복이 DevTools에서 body/요소가<br />
계속 플래시되는 직접 원인이다.<br />
SPA 전환 뒤의 처리는 loadPage()와 wikipage.content hook에서 따로 호출된다.<br />
*/<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
for (i = 0; i < mutations.length; i += 1) {<br />
target = mutations[i] && mutations[i].target;<br />
<br />
if (<br />
target &&<br />
target.nodeType === 1 &&<br />
(<br />
target.id === 'clbi-system-source-viewer' ||<br />
target.id === 'clbi-system-doc-indicator-row' ||<br />
(target.closest && target.closest('#clbi-system-source-viewer, #clbi-system-doc-indicator-row'))<br />
)<br />
) {<br />
return;<br />
}<br />
}<br />
<br />
if (<br />
document.getElementById('clbi-system-doc-indicator-row') &&<br />
document.getElementById('clbi-system-source-viewer')<br />
) {<br />
return;<br />
}<br />
}<br />
<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function normalizeClbiShellDomOrder() {<br />
var contentWrapper = document.querySelector('.content-wrapper');<br />
var topNav = document.getElementById('clbi-top-nav-wrap');<br />
var bottomNav = document.getElementById('clbi-bottom-nav-wrap');<br />
var canvas = document.getElementById('site-halftone-bg');<br />
var anchor;<br />
<br />
if (!contentWrapper || !topNav || !bottomNav || !document.body) return;<br />
<br />
/*<br />
Some user environments keep a Liberty/skin placeholder before .content-wrapper.<br />
When nav/sidebar/content are inserted around that original position, the whole<br />
CLBI shell starts one viewport below the top, so users see only the background.<br />
The shell must be placed immediately after the fixed background canvas, not<br />
wherever Liberty originally left .content-wrapper.<br />
*/<br />
anchor = canvas && canvas.parentNode === document.body<br />
? canvas.nextSibling<br />
: document.body.firstChild;<br />
<br />
if (topNav.parentNode !== document.body || topNav.nextSibling !== contentWrapper) {<br />
document.body.insertBefore(topNav, anchor);<br />
document.body.insertBefore(contentWrapper, topNav.nextSibling);<br />
document.body.insertBefore(bottomNav, contentWrapper.nextSibling);<br />
} else if (bottomNav.previousSibling !== contentWrapper) {<br />
document.body.insertBefore(bottomNav, contentWrapper.nextSibling);<br />
}<br />
<br />
document.body.classList.add('clbi-shell-ready');<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
normalizeClbiShellDomOrder();<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
<br />
if (typeof scheduleAdaptiveLeftRecentItems === 'function') {<br />
scheduleAdaptiveLeftRecentItems();<br />
}<br />
<br />
window.setTimeout(function () {<br />
updateClbiShellMetrics();<br />
if (typeof scheduleAdaptiveLeftRecentItems === 'function') {<br />
scheduleAdaptiveLeftRecentItems();<br />
}<br />
}, 0);<br />
<br />
window.setTimeout(function () {<br />
updateClbiShellMetrics();<br />
if (typeof scheduleAdaptiveLeftRecentItems === 'function') {<br />
scheduleAdaptiveLeftRecentItems();<br />
}<br />
}, 80);<br />
<br />
window.setTimeout(function () {<br />
updateClbiShellMetrics();<br />
if (typeof scheduleAdaptiveLeftRecentItems === 'function') {<br />
scheduleAdaptiveLeftRecentItems();<br />
}<br />
}, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
if (isNewsList && typeof scheduleAdaptiveLeftRecentItems === 'function') {<br />
scheduleAdaptiveLeftRecentItems();<br />
}<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
<br />
function updateAdaptiveLeftRecentItems() {<br />
var list = document.getElementById('clbi-left-recent-list');<br />
var wrapper = document.querySelector('.content-wrapper');<br />
var newsBox;<br />
var items;<br />
var allVisibleBottom;<br />
var wrapperBottom;<br />
var followingHeight;<br />
var sibling;<br />
var listRect;<br />
var sample;<br />
var sampleRect;<br />
var sampleStyle;<br />
var itemStep;<br />
var available;<br />
var limit;<br />
var i;<br />
<br />
if (!list || !wrapper) return;<br />
<br />
newsBox = list.closest('.clbi-left-news-box');<br />
items = Array.prototype.slice.call(list.querySelectorAll('.news-recent-item'));<br />
<br />
if (!newsBox || !items.length) return;<br />
<br />
/*<br />
기본 상태에서는 목록을 줄이지 않는다.<br />
먼저 전부 보이게 한 뒤, 뉴스 박스가 content-wrapper 하단을 넘는 경우에만<br />
최근 변경 항목을 줄인다.<br />
*/<br />
items.forEach(function (item) {<br />
item.classList.remove('is-adaptive-hidden');<br />
});<br />
<br />
wrapperBottom = Math.floor(wrapper.getBoundingClientRect().bottom);<br />
<br />
followingHeight = 0;<br />
sibling = newsBox.nextElementSibling;<br />
<br />
while (sibling) {<br />
if (sibling.offsetParent !== null) {<br />
followingHeight += Math.ceil(sibling.getBoundingClientRect().height || 0) + 8;<br />
}<br />
<br />
sibling = sibling.nextElementSibling;<br />
}<br />
<br />
allVisibleBottom = Math.ceil(newsBox.getBoundingClientRect().bottom + followingHeight);<br />
<br />
if (allVisibleBottom <= wrapperBottom) {<br />
list.setAttribute('data-adaptive-limit', String(items.length));<br />
return;<br />
}<br />
<br />
listRect = list.getBoundingClientRect();<br />
sample = items[0];<br />
sampleRect = sample.getBoundingClientRect();<br />
sampleStyle = window.getComputedStyle(sample);<br />
<br />
itemStep =<br />
Math.ceil(sampleRect.height || 36) +<br />
(parseFloat(sampleStyle.marginBottom || '0') || 0);<br />
<br />
if (!itemStep || itemStep < 1) itemStep = 38;<br />
<br />
available = Math.floor(wrapperBottom - listRect.top - followingHeight);<br />
<br />
/*<br />
CHANGELOG 영역과 RECENT CHANGES 타이틀은 유지하고, 최근 변경 항목만 줄인다.<br />
최소 1개는 남겨서 박스의 의미가 사라지지 않게 한다.<br />
*/<br />
limit = Math.floor((available + 2) / itemStep);<br />
limit = Math.max(1, Math.min(items.length, limit));<br />
<br />
list.setAttribute('data-adaptive-limit', String(limit));<br />
<br />
for (i = 0; i < items.length; i += 1) {<br />
items[i].classList.toggle('is-adaptive-hidden', i >= limit);<br />
}<br />
}<br />
<br />
function scheduleAdaptiveLeftRecentItems() {<br />
window.requestAnimationFrame(function () {<br />
updateAdaptiveLeftRecentItems();<br />
});<br />
<br />
window.setTimeout(updateAdaptiveLeftRecentItems, 80);<br />
window.setTimeout(updateAdaptiveLeftRecentItems, 240);<br />
}<br />
<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
scheduleAdaptiveLeftRecentItems();<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
normalizeClbiShellDomOrder();<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
normalizeClbiShellDomOrder();<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2484
미디어위키:Layout.css
2026-06-03T09:06:29Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
<br />
/* -----------------------------------------<br />
2-A. CLBI shell visibility safety<br />
----------------------------------------- */<br />
<br />
/*<br />
If a browser/user stylesheet or Liberty wrapper gives .content-wrapper a negative<br />
stacking order, the generated shell can exist in the DOM while only the<br />
background is visible. The CLBI shell parts must sit above the halftone canvas.<br />
*/<br />
<br />
#clbi-top-nav-wrap,<br />
.content-wrapper,<br />
#clbi-bottom-nav-wrap {<br />
position:relative !important;<br />
z-index:1 !important;<br />
}<br />
<br />
body.clbi-shell-ready #clbi-top-nav-wrap,<br />
body.clbi-shell-ready .content-wrapper,<br />
body.clbi-shell-ready #clbi-bottom-nav-wrap {<br />
visibility:visible !important;<br />
opacity:1 !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
2-B. 세로 가변 셸 / 좌측 최근 변경 적응형<br />
----------------------------------------- */<br />
<br />
/*<br />
상하단 네비는 고정된 조작 패널로 유지한다.<br />
브라우저 세로 높이가 작아지면 가운데 content-wrapper만 줄어든다.<br />
<br />
좌측 뉴스 박스는 기본 상태에서 원래 내용 높이만 차지한다.<br />
세로 공간이 부족할 때만 JS가 최근 변경 항목 수를 줄인다.<br />
*/<br />
<br />
@supports (height: 100dvh) {<br />
body {<br />
height:100dvh !important;<br />
}<br />
<br />
.content-wrapper {<br />
height:calc(100dvh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
max-height:calc(100dvh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
}<br />
}<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
max-height:100% !important;<br />
min-height:0 !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
align-self:flex-start !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
align-self:flex-start !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
#clbi-left-sidebar .clbi-left-lang-box,<br />
#clbi-left-sidebar .clbi-left-news-box {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
#clbi-left-sidebar .clbi-left-news-box {<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
#clbi-left-sidebar .clbi-news-box {<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
#clbi-left-sidebar .news-left-recent-feed {<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.news-recent-item.is-adaptive-hidden {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
CSS/JS 시스템 문서는 기본 제목을 숨기고 우상단 문서 표식과 raw source viewer를 사용한다.<br />
<br />
중요 구조:<br />
- .liberty-content-main : 외곽 #1d1d1d 프레임<br />
- #mw-content-text/.mw-body-content : MediaWiki가 끼워 넣는 중간 래퍼<br />
- .mw-parser-output : 내부 #080808 우물<br />
- #clbi-system-source-viewer : 우물 안에서 남은 높이를 차지하는 스크롤 패널<br />
<br />
이 중간 래퍼를 채우지 않으면 .mw-parser-output이 내용 높이로 접히고,<br />
코드 영역이 얇은 줄처럼 보인다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page #mw-content-text,<br />
body.clbi-system-doc-page .mw-body-content {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(#clbi-system-source-viewer):not(#clbi-system-doc-indicator-row) {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-original-source-hidden {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page #clbi-system-source-viewer {<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
width:100% !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:8px 0 0 !important;<br />
padding:8px 10px !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
border:0 !important;<br />
outline:none !important;<br />
font-family:Consolas, Monaco, 'Courier New', monospace !important;<br />
font-size:12px !important;<br />
line-height:1.45 !important;<br />
white-space:pre !important;<br />
tab-size:4;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codepane,<br />
body.clbi-system-doc-page .clbi-system-doc-codebox {<br />
display:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2483
미디어위키:Common.js
2026-06-03T09:02:49Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.removeAttribute('style');<br />
});<br />
}<br />
<br />
function getSystemDocOutputForShell() {<br />
return document.querySelector('.liberty-content-main .mw-parser-output');<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = getSystemDocOutputForShell();<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function ensureSystemDocSourceViewerForShell() {<br />
var output = getSystemDocOutputForShell();<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return null;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return null;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.appendChild(viewer);<br />
}<br />
<br />
fallbackText = source.textContent || '';<br />
<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
return viewer;<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var viewer;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
/*<br />
시스템 문서 뷰어가 이미 만들어져 있고 raw 원문도 로드된 상태라면<br />
다시 source 탐색/숨김/스타일 재적용을 하지 않는다.<br />
DevTools Elements 패널에서 body가 계속 파랗게 깜빡이던 원인은<br />
MutationObserver가 이 재적용을 반복해서 DOM attribute mutation을 만들었기 때문이다.<br />
*/<br />
if (<br />
viewer &&<br />
viewer.getAttribute('data-clbi-raw-title') === pageName &&<br />
viewer.getAttribute('data-clbi-raw-loaded') === '1'<br />
) {<br />
return;<br />
}<br />
<br />
viewer = ensureSystemDocSourceViewerForShell();<br />
if (!viewer) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || currentScrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (!row) {<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = getSystemDocOutputForShell();<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
type = row.querySelector('.clbi-system-doc-type');<br />
title = row.querySelector('.clbi-system-doc-title');<br />
<br />
if (type) type.textContent = ext;<br />
if (title) title.textContent = pageName;<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function (mutations) {<br />
var i;<br />
var target;<br />
<br />
/*<br />
시스템 CSS/JS 문서는 applyPageShellClasses()가 초기에 한 번<br />
인디케이터와 source viewer를 만든 뒤에는 MutationObserver가 다시<br />
같은 렌더링을 반복할 필요가 없다. 이 반복이 DevTools에서 body/요소가<br />
계속 플래시되는 직접 원인이다.<br />
SPA 전환 뒤의 처리는 loadPage()와 wikipage.content hook에서 따로 호출된다.<br />
*/<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
for (i = 0; i < mutations.length; i += 1) {<br />
target = mutations[i] && mutations[i].target;<br />
<br />
if (<br />
target &&<br />
target.nodeType === 1 &&<br />
(<br />
target.id === 'clbi-system-source-viewer' ||<br />
target.id === 'clbi-system-doc-indicator-row' ||<br />
(target.closest && target.closest('#clbi-system-source-viewer, #clbi-system-doc-indicator-row'))<br />
)<br />
) {<br />
return;<br />
}<br />
}<br />
<br />
if (<br />
document.getElementById('clbi-system-doc-indicator-row') &&<br />
document.getElementById('clbi-system-source-viewer')<br />
) {<br />
return;<br />
}<br />
}<br />
<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function normalizeClbiShellDomOrder() {<br />
var contentWrapper = document.querySelector('.content-wrapper');<br />
var topNav = document.getElementById('clbi-top-nav-wrap');<br />
var bottomNav = document.getElementById('clbi-bottom-nav-wrap');<br />
var canvas = document.getElementById('site-halftone-bg');<br />
var anchor;<br />
<br />
if (!contentWrapper || !topNav || !bottomNav || !document.body) return;<br />
<br />
/*<br />
Some user environments keep a Liberty/skin placeholder before .content-wrapper.<br />
When nav/sidebar/content are inserted around that original position, the whole<br />
CLBI shell starts one viewport below the top, so users see only the background.<br />
The shell must be placed immediately after the fixed background canvas, not<br />
wherever Liberty originally left .content-wrapper.<br />
*/<br />
anchor = canvas && canvas.parentNode === document.body<br />
? canvas.nextSibling<br />
: document.body.firstChild;<br />
<br />
if (topNav.parentNode !== document.body || topNav.nextSibling !== contentWrapper) {<br />
document.body.insertBefore(topNav, anchor);<br />
document.body.insertBefore(contentWrapper, topNav.nextSibling);<br />
document.body.insertBefore(bottomNav, contentWrapper.nextSibling);<br />
} else if (bottomNav.previousSibling !== contentWrapper) {<br />
document.body.insertBefore(bottomNav, contentWrapper.nextSibling);<br />
}<br />
<br />
document.body.classList.add('clbi-shell-ready');<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
normalizeClbiShellDomOrder();<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
<br />
if (typeof scheduleAdaptiveLeftRecentItems === 'function') {<br />
scheduleAdaptiveLeftRecentItems();<br />
}<br />
<br />
window.setTimeout(function () {<br />
updateClbiShellMetrics();<br />
if (typeof scheduleAdaptiveLeftRecentItems === 'function') {<br />
scheduleAdaptiveLeftRecentItems();<br />
}<br />
}, 0);<br />
<br />
window.setTimeout(function () {<br />
updateClbiShellMetrics();<br />
if (typeof scheduleAdaptiveLeftRecentItems === 'function') {<br />
scheduleAdaptiveLeftRecentItems();<br />
}<br />
}, 80);<br />
<br />
window.setTimeout(function () {<br />
updateClbiShellMetrics();<br />
if (typeof scheduleAdaptiveLeftRecentItems === 'function') {<br />
scheduleAdaptiveLeftRecentItems();<br />
}<br />
}, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
if (isNewsList && typeof scheduleAdaptiveLeftRecentItems === 'function') {<br />
scheduleAdaptiveLeftRecentItems();<br />
}<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
<br />
function updateAdaptiveLeftRecentItems() {<br />
var list = document.getElementById('clbi-left-recent-list');<br />
var content;<br />
var items;<br />
var contentRect;<br />
var listRect;<br />
var available;<br />
var sample;<br />
var sampleRect;<br />
var sampleStyle;<br />
var itemStep;<br />
var limit;<br />
var i;<br />
<br />
if (!list) return;<br />
<br />
content = list.closest('.clbi-news-box') || list.parentElement;<br />
items = Array.prototype.slice.call(list.querySelectorAll('.news-recent-item'));<br />
<br />
if (!content || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
item.classList.remove('is-adaptive-hidden');<br />
});<br />
<br />
contentRect = content.getBoundingClientRect();<br />
listRect = list.getBoundingClientRect();<br />
available = Math.floor(contentRect.bottom - listRect.top);<br />
<br />
if (!available || available < 24) {<br />
limit = 1;<br />
} else {<br />
sample = items[0];<br />
sampleRect = sample.getBoundingClientRect();<br />
sampleStyle = window.getComputedStyle(sample);<br />
itemStep =<br />
Math.ceil(sampleRect.height || 36) +<br />
(parseFloat(sampleStyle.marginBottom || '0') || 0);<br />
<br />
if (!itemStep || itemStep < 1) itemStep = 38;<br />
<br />
limit = Math.floor((available + 2) / itemStep);<br />
limit = Math.max(1, Math.min(items.length, limit));<br />
}<br />
<br />
list.setAttribute('data-adaptive-limit', String(limit));<br />
<br />
for (i = 0; i < items.length; i += 1) {<br />
items[i].classList.toggle('is-adaptive-hidden', i >= limit);<br />
}<br />
}<br />
<br />
function scheduleAdaptiveLeftRecentItems() {<br />
window.requestAnimationFrame(function () {<br />
updateAdaptiveLeftRecentItems();<br />
});<br />
<br />
window.setTimeout(updateAdaptiveLeftRecentItems, 80);<br />
window.setTimeout(updateAdaptiveLeftRecentItems, 240);<br />
}<br />
<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
scheduleAdaptiveLeftRecentItems();<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
normalizeClbiShellDomOrder();<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
normalizeClbiShellDomOrder();<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2482
미디어위키:Layout.css
2026-06-03T09:02:32Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
<br />
/* -----------------------------------------<br />
2-A. CLBI shell visibility safety<br />
----------------------------------------- */<br />
<br />
/*<br />
If a browser/user stylesheet or Liberty wrapper gives .content-wrapper a negative<br />
stacking order, the generated shell can exist in the DOM while only the<br />
background is visible. The CLBI shell parts must sit above the halftone canvas.<br />
*/<br />
<br />
#clbi-top-nav-wrap,<br />
.content-wrapper,<br />
#clbi-bottom-nav-wrap {<br />
position:relative !important;<br />
z-index:1 !important;<br />
}<br />
<br />
body.clbi-shell-ready #clbi-top-nav-wrap,<br />
body.clbi-shell-ready .content-wrapper,<br />
body.clbi-shell-ready #clbi-bottom-nav-wrap {<br />
visibility:visible !important;<br />
opacity:1 !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
2-B. 세로 가변 셸 / 좌측 최근 변경 적응형<br />
----------------------------------------- */<br />
<br />
/*<br />
상하단 네비는 고정된 조작 패널로 유지한다.<br />
브라우저 세로 높이가 작아지면 가운데 content-wrapper만 줄어들고,<br />
좌측 사이드바의 최근 변경 목록은 가능한 개수만 보여준다.<br />
*/<br />
<br />
@supports (height: 100dvh) {<br />
body {<br />
height:100dvh !important;<br />
}<br />
<br />
.content-wrapper {<br />
height:calc(100dvh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
max-height:calc(100dvh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
}<br />
}<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
height:100% !important;<br />
max-height:100% !important;<br />
min-height:0 !important;<br />
align-self:stretch !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
overflow:hidden !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
#clbi-left-sidebar .clbi-left-lang-box {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
#clbi-left-sidebar .clbi-left-news-box {<br />
display:flex !important;<br />
flex-direction:column !important;<br />
flex:1 1 auto !important;<br />
min-height:148px !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
#clbi-left-sidebar .clbi-left-news-box > .clbi-left-title {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
#clbi-left-sidebar .clbi-left-news-box .clbi-news-box {<br />
display:flex !important;<br />
flex-direction:column !important;<br />
flex:1 1 auto !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
#clbi-left-sidebar .news-feed-title,<br />
#clbi-left-sidebar .news-left-changelog-feed {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
#clbi-left-sidebar .news-left-recent-feed {<br />
flex:1 1 auto !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.news-recent-item.is-adaptive-hidden {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
CSS/JS 시스템 문서는 기본 제목을 숨기고 우상단 문서 표식과 raw source viewer를 사용한다.<br />
<br />
중요 구조:<br />
- .liberty-content-main : 외곽 #1d1d1d 프레임<br />
- #mw-content-text/.mw-body-content : MediaWiki가 끼워 넣는 중간 래퍼<br />
- .mw-parser-output : 내부 #080808 우물<br />
- #clbi-system-source-viewer : 우물 안에서 남은 높이를 차지하는 스크롤 패널<br />
<br />
이 중간 래퍼를 채우지 않으면 .mw-parser-output이 내용 높이로 접히고,<br />
코드 영역이 얇은 줄처럼 보인다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page #mw-content-text,<br />
body.clbi-system-doc-page .mw-body-content {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(#clbi-system-source-viewer):not(#clbi-system-doc-indicator-row) {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-original-source-hidden {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page #clbi-system-source-viewer {<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
width:100% !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:8px 0 0 !important;<br />
padding:8px 10px !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
border:0 !important;<br />
outline:none !important;<br />
font-family:Consolas, Monaco, 'Courier New', monospace !important;<br />
font-size:12px !important;<br />
line-height:1.45 !important;<br />
white-space:pre !important;<br />
tab-size:4;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codepane,<br />
body.clbi-system-doc-page .clbi-system-doc-codebox {<br />
display:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2481
미디어위키:Common.js
2026-06-02T21:08:54Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.removeAttribute('style');<br />
});<br />
}<br />
<br />
function getSystemDocOutputForShell() {<br />
return document.querySelector('.liberty-content-main .mw-parser-output');<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = getSystemDocOutputForShell();<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function ensureSystemDocSourceViewerForShell() {<br />
var output = getSystemDocOutputForShell();<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return null;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return null;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.appendChild(viewer);<br />
}<br />
<br />
fallbackText = source.textContent || '';<br />
<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
return viewer;<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var viewer;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
/*<br />
시스템 문서 뷰어가 이미 만들어져 있고 raw 원문도 로드된 상태라면<br />
다시 source 탐색/숨김/스타일 재적용을 하지 않는다.<br />
DevTools Elements 패널에서 body가 계속 파랗게 깜빡이던 원인은<br />
MutationObserver가 이 재적용을 반복해서 DOM attribute mutation을 만들었기 때문이다.<br />
*/<br />
if (<br />
viewer &&<br />
viewer.getAttribute('data-clbi-raw-title') === pageName &&<br />
viewer.getAttribute('data-clbi-raw-loaded') === '1'<br />
) {<br />
return;<br />
}<br />
<br />
viewer = ensureSystemDocSourceViewerForShell();<br />
if (!viewer) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || currentScrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (!row) {<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = getSystemDocOutputForShell();<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
type = row.querySelector('.clbi-system-doc-type');<br />
title = row.querySelector('.clbi-system-doc-title');<br />
<br />
if (type) type.textContent = ext;<br />
if (title) title.textContent = pageName;<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function (mutations) {<br />
var i;<br />
var target;<br />
<br />
/*<br />
시스템 CSS/JS 문서는 applyPageShellClasses()가 초기에 한 번<br />
인디케이터와 source viewer를 만든 뒤에는 MutationObserver가 다시<br />
같은 렌더링을 반복할 필요가 없다. 이 반복이 DevTools에서 body/요소가<br />
계속 플래시되는 직접 원인이다.<br />
SPA 전환 뒤의 처리는 loadPage()와 wikipage.content hook에서 따로 호출된다.<br />
*/<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
for (i = 0; i < mutations.length; i += 1) {<br />
target = mutations[i] && mutations[i].target;<br />
<br />
if (<br />
target &&<br />
target.nodeType === 1 &&<br />
(<br />
target.id === 'clbi-system-source-viewer' ||<br />
target.id === 'clbi-system-doc-indicator-row' ||<br />
(target.closest && target.closest('#clbi-system-source-viewer, #clbi-system-doc-indicator-row'))<br />
)<br />
) {<br />
return;<br />
}<br />
}<br />
<br />
if (<br />
document.getElementById('clbi-system-doc-indicator-row') &&<br />
document.getElementById('clbi-system-source-viewer')<br />
) {<br />
return;<br />
}<br />
}<br />
<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2480
미디어위키:Layout.css
2026-06-02T21:05:19Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
CSS/JS 시스템 문서는 기본 제목을 숨기고 우상단 문서 표식과 raw source viewer를 사용한다.<br />
<br />
중요 구조:<br />
- .liberty-content-main : 외곽 #1d1d1d 프레임<br />
- #mw-content-text/.mw-body-content : MediaWiki가 끼워 넣는 중간 래퍼<br />
- .mw-parser-output : 내부 #080808 우물<br />
- #clbi-system-source-viewer : 우물 안에서 남은 높이를 차지하는 스크롤 패널<br />
<br />
이 중간 래퍼를 채우지 않으면 .mw-parser-output이 내용 높이로 접히고,<br />
코드 영역이 얇은 줄처럼 보인다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page #mw-content-text,<br />
body.clbi-system-doc-page .mw-body-content {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(#clbi-system-source-viewer):not(#clbi-system-doc-indicator-row) {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-original-source-hidden {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page #clbi-system-source-viewer {<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
width:100% !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:8px 0 0 !important;<br />
padding:8px 10px !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
border:0 !important;<br />
outline:none !important;<br />
font-family:Consolas, Monaco, 'Courier New', monospace !important;<br />
font-size:12px !important;<br />
line-height:1.45 !important;<br />
white-space:pre !important;<br />
tab-size:4;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codepane,<br />
body.clbi-system-doc-page .clbi-system-doc-codebox {<br />
display:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2479
미디어위키:Common.js
2026-06-02T21:01:45Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.removeAttribute('style');<br />
});<br />
}<br />
<br />
function getSystemDocOutputForShell() {<br />
return document.querySelector('.liberty-content-main .mw-parser-output');<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = getSystemDocOutputForShell();<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function ensureSystemDocSourceViewerForShell() {<br />
var output = getSystemDocOutputForShell();<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return null;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return null;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.appendChild(viewer);<br />
}<br />
<br />
fallbackText = source.textContent || '';<br />
<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
return viewer;<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var viewer;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
viewer = ensureSystemDocSourceViewerForShell();<br />
if (!viewer) return;<br />
<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
<br />
if (viewer.getAttribute('data-clbi-raw-title') === pageName && viewer.getAttribute('data-clbi-raw-loaded') === '1') {<br />
return;<br />
}<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || currentScrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (!row) {<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = getSystemDocOutputForShell();<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
type = row.querySelector('.clbi-system-doc-type');<br />
title = row.querySelector('.clbi-system-doc-title');<br />
<br />
if (type) type.textContent = ext;<br />
if (title) title.textContent = pageName;<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2478
미디어위키:Layout.css
2026-06-02T21:01:38Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
CSS/JS 시스템 문서는 기본 제목을 숨기고 우상단 문서 표식과 raw source viewer를 사용한다.<br />
source viewer는 .mw-parser-output 안에서 absolute inset:8px로 배치되어<br />
우물의 상하좌우 8px 마감을 유지한다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:hidden !important;<br />
display:block !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-original-source-hidden {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page #clbi-system-source-viewer {<br />
position:absolute !important;<br />
left:8px !important;<br />
right:8px !important;<br />
top:8px !important;<br />
bottom:8px !important;<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
width:auto !important;<br />
height:auto !important;<br />
max-width:none !important;<br />
max-height:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px 10px !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
border:0 !important;<br />
outline:none !important;<br />
font-family:Consolas, Monaco, 'Courier New', monospace !important;<br />
font-size:12px !important;<br />
line-height:1.45 !important;<br />
white-space:pre !important;<br />
tab-size:4;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codepane,<br />
body.clbi-system-doc-page .clbi-system-doc-codebox {<br />
display:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2477
미디어위키:Common.js
2026-06-02T20:55:42Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
function cleanupSystemDocViewerResidueForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox, .clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
cleanupSystemDocViewerResidueForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
cleanupSystemDocViewerResidueForShell();<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (!row) {<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
type = row.querySelector('.clbi-system-doc-type');<br />
title = row.querySelector('.clbi-system-doc-title');<br />
<br />
if (type) type.textContent = ext;<br />
if (title) title.textContent = pageName;<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
cleanupSystemDocViewerResidue: cleanupSystemDocViewerResidueForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2476
미디어위키:Layout.css
2026-06-02T20:55:34Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
시스템 CSS/JS 문서는 기본 제목을 숨기고 우상단 문서 표식만 띄운다.<br />
코드 본문은 MediaWiki 원본 .mw-highlight를 유지하고,<br />
.mw-parser-output 내부 우물 자체가 스크롤을 담당한다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:auto !important;<br />
display:block !important;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-highlight,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-code,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > pre {<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
width:max-content !important;<br />
min-width:100% !important;<br />
max-width:none !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:visible !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-highlight pre,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-code pre,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > pre {<br />
margin:0 !important;<br />
max-width:none !important;<br />
white-space:pre !important;<br />
}<br />
<br />
body.clbi-system-doc-page #clbi-system-source-viewer,<br />
body.clbi-system-doc-page .clbi-system-doc-codepane {<br />
display:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2475
미디어위키:Common.js
2026-06-02T20:52:05Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.removeAttribute('style');<br />
});<br />
}<br />
<br />
function getSystemDocOutputForShell() {<br />
return document.querySelector('.liberty-content-main .mw-parser-output');<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = getSystemDocOutputForShell();<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function ensureSystemDocSourceViewerForShell() {<br />
var output = getSystemDocOutputForShell();<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return null;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return null;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.insertBefore(viewer, source);<br />
}<br />
<br />
fallbackText = source.textContent || '';<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
return viewer;<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var viewer;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
viewer = ensureSystemDocSourceViewerForShell();<br />
if (!viewer) return;<br />
<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
<br />
if (viewer.getAttribute('data-clbi-raw-title') === pageName && viewer.getAttribute('data-clbi-raw-loaded') === '1') {<br />
return;<br />
}<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || currentScrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (!row) {<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = getSystemDocOutputForShell();<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
type = row.querySelector('.clbi-system-doc-type');<br />
title = row.querySelector('.clbi-system-doc-title');<br />
<br />
if (type) type.textContent = ext;<br />
if (title) title.textContent = pageName;<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.addEventListener('resize', function () {<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
window.setTimeout(applySystemDocSourceViewerLayoutForShell, 0);<br />
}<br />
});<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
renderSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
layoutSystemDocSourceViewer: applySystemDocSourceViewerLayoutForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2474
미디어위키:Layout.css
2026-06-02T20:51:55Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
CSS/JS 시스템 문서는 기본 제목을 숨기고, 우상단 문서 표식과 raw source viewer를 사용한다.<br />
- .liberty-content-main: 외곽 프레임<br />
- .mw-parser-output: 내부 우물<br />
- #clbi-system-source-viewer: 내부 우물 안에서 남은 높이를 차지하는 스크롤 패널<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(#clbi-system-source-viewer):not(#clbi-system-doc-indicator-row) {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-original-source-hidden {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page #clbi-system-source-viewer {<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
width:100% !important;<br />
max-width:none !important;<br />
min-height:0 !important;<br />
height:auto !important;<br />
max-height:none !important;<br />
margin:8px 0 0 !important;<br />
padding:8px 10px !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
border:0 !important;<br />
outline:none !important;<br />
font-family:Consolas, Monaco, 'Courier New', monospace !important;<br />
font-size:12px !important;<br />
line-height:1.45 !important;<br />
white-space:pre !important;<br />
tab-size:4;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2473
미디어위키:Common.js
2026-06-02T20:45:34Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
var systemDocRendering = false;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('box-sizing');<br />
node.style.removeProperty('flex');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('max-height');<br />
node.style.removeProperty('overflow');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('background');<br />
node.style.removeProperty('color');<br />
});<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
fallbackText = source.textContent || '';<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.insertBefore(viewer, source);<br />
}<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
viewer.scrollTop = currentScrollTop;<br />
<br />
if (viewer.getAttribute('data-clbi-raw-title') === pageName && viewer.getAttribute('data-clbi-raw-loaded') === '1') {<br />
return;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
systemDocRendering = true;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (!row) {<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
type = row.querySelector('.clbi-system-doc-type');<br />
title = row.querySelector('.clbi-system-doc-title');<br />
<br />
if (type) type.textContent = ext;<br />
if (title) title.textContent = pageName;<br />
<br />
renderSystemDocSourceViewerForShell();<br />
<br />
window.setTimeout(function () {<br />
systemDocRendering = false;<br />
}, 0);<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (systemDocRendering) return;<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
if (<br />
document.getElementById('clbi-system-doc-indicator-row') &&<br />
document.getElementById('clbi-system-source-viewer')<br />
) {<br />
return;<br />
}<br />
}<br />
<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.addEventListener('resize', function () {<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
window.setTimeout(applySystemDocSourceViewerLayoutForShell, 0);<br />
}<br />
});<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
renderSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
layoutSystemDocSourceViewer: applySystemDocSourceViewerLayoutForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2472
미디어위키:Layout.css
2026-06-02T20:45:26Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
MediaWiki CSS/JS 문서는 기본 제목을 숨기고 우상단 시스템 문서 표식만 띄운다.<br />
캐시 안내문은 유지한다.<br />
원본 SyntaxHighlight 출력은 숨기고, Common.js가 만든 읽기 전용 raw viewer만 스크롤한다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(#clbi-system-source-viewer):not(#clbi-system-doc-indicator-row) {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-original-source-hidden {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page #clbi-system-source-viewer {<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
width:100% !important;<br />
max-width:none !important;<br />
min-height:0 !important;<br />
height:auto !important;<br />
max-height:none !important;<br />
margin:8px 0 0 !important;<br />
padding:8px 10px !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
border:0 !important;<br />
outline:none !important;<br />
font-family:Consolas, Monaco, 'Courier New', monospace !important;<br />
font-size:12px !important;<br />
line-height:1.45 !important;<br />
white-space:pre !important;<br />
tab-size:4;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2471
미디어위키:Common.js
2026-06-02T20:36:59Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('box-sizing');<br />
node.style.removeProperty('flex');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('max-height');<br />
node.style.removeProperty('overflow');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('background');<br />
node.style.removeProperty('color');<br />
});<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function applySystemDocSourceViewerLayoutForShell() {<br />
/*<br />
CSS owns the source viewer layout.<br />
<br />
Earlier versions recalculated pixel heights on every refresh. That made<br />
the viewer fight the fixed page shell and caused the blue inspector<br />
flashing / disappearing bottom gap. The viewer is now a normal flex<br />
child of .mw-parser-output; JS only creates it and supplies text.<br />
*/<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (!viewer || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
viewer.removeAttribute('style');<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
fallbackText = source.textContent || '';<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.insertBefore(viewer, source);<br />
}<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
applySystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
<br />
if (viewer.getAttribute('data-clbi-raw-title') === pageName && viewer.getAttribute('data-clbi-raw-loaded') === '1') {<br />
return;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
applySystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
applySystemDocSourceViewerLayoutForShell();<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
var existing;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
existing = document.getElementById('clbi-system-doc-indicator-row');<br />
if (existing && existing.parentNode) { existing.parentNode.removeChild(existing); }<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.addEventListener('resize', function () {<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
window.setTimeout(applySystemDocSourceViewerLayoutForShell, 0);<br />
}<br />
});<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
renderSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
layoutSystemDocSourceViewer: applySystemDocSourceViewerLayoutForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2470
미디어위키:Layout.css
2026-06-02T20:36:51Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
MediaWiki CSS/JS 문서는 기본 제목을 숨기고 우상단 시스템 문서 표식만 띄운다.<br />
캐시 안내문은 유지한다.<br />
원본 SyntaxHighlight 출력은 숨기고, Common.js가 만든 읽기 전용 raw viewer가<br />
.mw-parser-output 내부 우물의 남은 높이를 차지한다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(#clbi-system-source-viewer):not(#clbi-system-doc-indicator-row) {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-original-source-hidden {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page #clbi-system-source-viewer {<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
width:100% !important;<br />
max-width:none !important;<br />
min-height:0 !important;<br />
height:auto !important;<br />
max-height:none !important;<br />
margin:8px 0 0 !important;<br />
padding:8px 10px !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
border:0 !important;<br />
outline:none !important;<br />
font-family:Consolas, Monaco, 'Courier New', monospace !important;<br />
font-size:12px !important;<br />
line-height:1.45 !important;<br />
white-space:pre !important;<br />
tab-size:4;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2469
미디어위키:Common.js
2026-06-02T20:33:00Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
var systemDocLayoutRaf = 0;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('box-sizing');<br />
node.style.removeProperty('flex');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('max-height');<br />
node.style.removeProperty('overflow');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('background');<br />
node.style.removeProperty('color');<br />
});<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (systemDocLayoutRaf) {<br />
cancelAnimationFrame(systemDocLayoutRaf);<br />
systemDocLayoutRaf = 0;<br />
}<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function applySystemDocSourceViewerLayoutForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var main = document.querySelector('.liberty-content-main');<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
var indicator = document.getElementById('clbi-system-doc-indicator-row');<br />
var outputRect;<br />
var outputStyle;<br />
var outputPaddingBottom;<br />
var viewerTop;<br />
var viewerBottom;<br />
var viewerHeight;<br />
var currentScrollTop;<br />
<br />
if (!output || !main || !viewer || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
output.style.setProperty('display', 'flex', 'important');<br />
output.style.setProperty('flex-direction', 'column', 'important');<br />
output.style.setProperty('min-height', '0', 'important');<br />
output.style.setProperty('height', 'auto', 'important');<br />
output.style.setProperty('overflow', 'hidden', 'important');<br />
output.style.setProperty('position', 'relative', 'important');<br />
<br />
Array.prototype.slice.call(output.children || []).forEach(function (el) {<br />
if (!el || el === viewer || el === indicator) return;<br />
el.style.setProperty('flex', '0 0 auto', 'important');<br />
});<br />
<br />
main.style.setProperty('display', 'flex', 'important');<br />
main.style.setProperty('flex-direction', 'column', 'important');<br />
main.style.setProperty('min-height', '0', 'important');<br />
main.style.setProperty('overflow', 'hidden', 'important');<br />
<br />
viewer.style.setProperty('display', 'block', 'important');<br />
viewer.style.setProperty('box-sizing', 'border-box', 'important');<br />
viewer.style.setProperty('flex', '0 0 auto', 'important');<br />
viewer.style.setProperty('width', '100%', 'important');<br />
viewer.style.setProperty('max-width', 'none', 'important');<br />
viewer.style.setProperty('min-height', '0', 'important');<br />
viewer.style.setProperty('margin', '8px 0 0', 'important');<br />
viewer.style.setProperty('padding', '8px 10px', 'important');<br />
viewer.style.setProperty('overflow', 'auto', 'important');<br />
viewer.style.setProperty('background', '#f3f6f7', 'important');<br />
viewer.style.setProperty('color', '#111111', 'important');<br />
viewer.style.setProperty('border', '0', 'important');<br />
viewer.style.setProperty('outline', 'none', 'important');<br />
viewer.style.setProperty('font-family', "Consolas, Monaco, 'Courier New', monospace", 'important');<br />
viewer.style.setProperty('font-size', '12px', 'important');<br />
viewer.style.setProperty('line-height', '1.45', 'important');<br />
viewer.style.setProperty('white-space', 'pre', 'important');<br />
viewer.style.setProperty('tab-size', '4');<br />
viewer.style.setProperty('scrollbar-gutter', 'stable');<br />
<br />
outputRect = output.getBoundingClientRect();<br />
outputStyle = window.getComputedStyle(output);<br />
outputPaddingBottom = parseFloat(outputStyle.paddingBottom || '0') || 0;<br />
viewerTop = viewer.getBoundingClientRect().top;<br />
viewerBottom = outputRect.bottom - outputPaddingBottom;<br />
<br />
viewerHeight = Math.max(260, Math.round(viewerBottom - viewerTop));<br />
<br />
viewer.style.setProperty('height', viewerHeight + 'px', 'important');<br />
viewer.style.setProperty('max-height', viewerHeight + 'px', 'important');<br />
viewer.scrollTop = currentScrollTop;<br />
}<br />
<br />
function scheduleSystemDocSourceViewerLayoutForShell() {<br />
if (systemDocLayoutRaf) {<br />
cancelAnimationFrame(systemDocLayoutRaf);<br />
}<br />
<br />
systemDocLayoutRaf = requestAnimationFrame(function () {<br />
systemDocLayoutRaf = 0;<br />
applySystemDocSourceViewerLayoutForShell();<br />
});<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
fallbackText = source.textContent || '';<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.insertBefore(viewer, source);<br />
}<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
scheduleSystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
<br />
if (viewer.getAttribute('data-clbi-raw-title') === pageName && viewer.getAttribute('data-clbi-raw-loaded') === '1') {<br />
return;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
scheduleSystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
scheduleSystemDocSourceViewerLayoutForShell();<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (!row) {<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
type = row.querySelector('.clbi-system-doc-type');<br />
title = row.querySelector('.clbi-system-doc-title');<br />
<br />
if (type) type.textContent = ext;<br />
if (title) title.textContent = pageName;<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (isMediaWikiSystemAssetPageForShell()) return;<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.addEventListener('resize', function () {<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
window.setTimeout(scheduleSystemDocSourceViewerLayoutForShell, 0);<br />
}<br />
});<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
renderSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
layoutSystemDocSourceViewer: scheduleSystemDocSourceViewerLayoutForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2468
미디어위키:Common.js
2026-06-02T20:13:33Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('box-sizing');<br />
node.style.removeProperty('flex');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('max-height');<br />
node.style.removeProperty('overflow');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('background');<br />
node.style.removeProperty('color');<br />
});<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function applySystemDocSourceViewerLayoutForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var main = document.querySelector('.liberty-content-main');<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
var indicator = document.getElementById('clbi-system-doc-indicator-row');<br />
var bottomNav = document.getElementById('clbi-bottom-nav-wrap');<br />
var viewerTop;<br />
var mainBottom;<br />
var viewerHeight;<br />
var currentScrollTop;<br />
<br />
if (!output || !main || !viewer || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
output.style.setProperty('display', 'flex', 'important');<br />
output.style.setProperty('flex-direction', 'column', 'important');<br />
output.style.setProperty('min-height', '0', 'important');<br />
output.style.setProperty('height', 'auto', 'important');<br />
output.style.setProperty('overflow', 'hidden', 'important');<br />
output.style.setProperty('position', 'relative', 'important');<br />
<br />
Array.prototype.slice.call(output.children || []).forEach(function (el) {<br />
if (!el || el === viewer || el === indicator) return;<br />
el.style.setProperty('flex', '0 0 auto', 'important');<br />
});<br />
<br />
main.style.setProperty('display', 'flex', 'important');<br />
main.style.setProperty('flex-direction', 'column', 'important');<br />
main.style.setProperty('min-height', '0', 'important');<br />
main.style.setProperty('overflow', 'hidden', 'important');<br />
<br />
viewer.style.setProperty('display', 'block', 'important');<br />
viewer.style.setProperty('box-sizing', 'border-box', 'important');<br />
viewer.style.setProperty('flex', '0 0 auto', 'important');<br />
viewer.style.setProperty('width', '100%', 'important');<br />
viewer.style.setProperty('max-width', 'none', 'important');<br />
viewer.style.setProperty('min-height', '0', 'important');<br />
viewer.style.setProperty('margin', '8px 0 0', 'important');<br />
viewer.style.setProperty('padding', '8px 10px', 'important');<br />
viewer.style.setProperty('overflow', 'auto', 'important');<br />
viewer.style.setProperty('background', '#f3f6f7', 'important');<br />
viewer.style.setProperty('color', '#111111', 'important');<br />
viewer.style.setProperty('border', '0', 'important');<br />
viewer.style.setProperty('outline', 'none', 'important');<br />
viewer.style.setProperty('font-family', "Consolas, Monaco, 'Courier New', monospace", 'important');<br />
viewer.style.setProperty('font-size', '12px', 'important');<br />
viewer.style.setProperty('line-height', '1.45', 'important');<br />
viewer.style.setProperty('white-space', 'pre', 'important');<br />
viewer.style.setProperty('tab-size', '4');<br />
viewer.style.setProperty('scrollbar-gutter', 'stable');<br />
<br />
viewerTop = viewer.getBoundingClientRect().top;<br />
<br />
/*<br />
046 used .mw-parser-output's bottom as the measurement base. On system<br />
source pages that value can collapse to the current source-viewer height<br />
during the first layout pass, so the viewer was locked at the 260px<br />
fallback and a large empty 080808 well appeared below it.<br />
<br />
Use the stable outer content frame bottom instead, then leave a real<br />
lower closing gutter inside the well. This keeps the source viewer tall<br />
while preserving the visible bottom finish above the bottom nav.<br />
*/<br />
mainBottom = main.getBoundingClientRect().bottom - 16;<br />
<br />
if (bottomNav) {<br />
mainBottom = Math.min(mainBottom, bottomNav.getBoundingClientRect().top - 24);<br />
}<br />
<br />
viewerHeight = Math.max(260, Math.round(mainBottom - viewerTop));<br />
<br />
viewer.style.setProperty('height', viewerHeight + 'px', 'important');<br />
viewer.style.setProperty('max-height', viewerHeight + 'px', 'important');<br />
viewer.scrollTop = currentScrollTop;<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
fallbackText = source.textContent || '';<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.insertBefore(viewer, source);<br />
}<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
applySystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
<br />
if (viewer.getAttribute('data-clbi-raw-title') === pageName && viewer.getAttribute('data-clbi-raw-loaded') === '1') {<br />
return;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
applySystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
applySystemDocSourceViewerLayoutForShell();<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
var existing;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
existing = document.getElementById('clbi-system-doc-indicator-row');<br />
if (existing && existing.parentNode) { existing.parentNode.removeChild(existing); }<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.addEventListener('resize', function () {<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
window.setTimeout(applySystemDocSourceViewerLayoutForShell, 0);<br />
}<br />
});<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
renderSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
layoutSystemDocSourceViewer: applySystemDocSourceViewerLayoutForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2467
미디어위키:Common.js
2026-06-02T20:09:25Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('box-sizing');<br />
node.style.removeProperty('flex');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('max-height');<br />
node.style.removeProperty('overflow');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('background');<br />
node.style.removeProperty('color');<br />
});<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function applySystemDocSourceViewerLayoutForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var main = document.querySelector('.liberty-content-main');<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
var indicator = document.getElementById('clbi-system-doc-indicator-row');<br />
var bottomNav = document.getElementById('clbi-bottom-nav-wrap');<br />
var viewerTop;<br />
var mainBottom;<br />
var viewerHeight;<br />
var currentScrollTop;<br />
<br />
if (!output || !main || !viewer || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
output.style.setProperty('display', 'flex', 'important');<br />
output.style.setProperty('flex-direction', 'column', 'important');<br />
output.style.setProperty('min-height', '0', 'important');<br />
output.style.setProperty('height', 'auto', 'important');<br />
output.style.setProperty('overflow', 'hidden', 'important');<br />
output.style.setProperty('position', 'relative', 'important');<br />
<br />
Array.prototype.slice.call(output.children || []).forEach(function (el) {<br />
if (!el || el === viewer || el === indicator) return;<br />
el.style.setProperty('flex', '0 0 auto', 'important');<br />
});<br />
<br />
main.style.setProperty('display', 'flex', 'important');<br />
main.style.setProperty('flex-direction', 'column', 'important');<br />
main.style.setProperty('min-height', '0', 'important');<br />
main.style.setProperty('overflow', 'hidden', 'important');<br />
<br />
viewer.style.setProperty('display', 'block', 'important');<br />
viewer.style.setProperty('box-sizing', 'border-box', 'important');<br />
viewer.style.setProperty('flex', '0 0 auto', 'important');<br />
viewer.style.setProperty('width', '100%', 'important');<br />
viewer.style.setProperty('max-width', 'none', 'important');<br />
viewer.style.setProperty('min-height', '0', 'important');<br />
viewer.style.setProperty('margin', '8px 0 0', 'important');<br />
viewer.style.setProperty('padding', '8px 10px', 'important');<br />
viewer.style.setProperty('overflow', 'auto', 'important');<br />
viewer.style.setProperty('background', '#f3f6f7', 'important');<br />
viewer.style.setProperty('color', '#111111', 'important');<br />
viewer.style.setProperty('border', '0', 'important');<br />
viewer.style.setProperty('outline', 'none', 'important');<br />
viewer.style.setProperty('font-family', "Consolas, Monaco, 'Courier New', monospace", 'important');<br />
viewer.style.setProperty('font-size', '12px', 'important');<br />
viewer.style.setProperty('line-height', '1.45', 'important');<br />
viewer.style.setProperty('white-space', 'pre', 'important');<br />
viewer.style.setProperty('tab-size', '4');<br />
viewer.style.setProperty('scrollbar-gutter', 'stable');<br />
<br />
viewerTop = viewer.getBoundingClientRect().top;<br />
<br />
/*<br />
The source viewer lives inside .mw-parser-output, not directly inside<br />
.liberty-content-main. 044 sized the viewer against the outer frame<br />
bottom, so the white source panel covered the inner-well bottom padding<br />
and visually erased the #1d1d1d closing frame above the bottom nav.<br />
<br />
Use the inner well's content bottom instead:<br />
.liberty-content-main supplies the outer 1d1d1d frame,<br />
.mw-parser-output supplies the 080808 well and its 8px inner padding,<br />
and #clbi-system-source-viewer ends before that bottom padding.<br />
*/<br />
var outputRect = output.getBoundingClientRect();<br />
var outputStyle = window.getComputedStyle(output);<br />
var outputPaddingBottom = parseFloat(outputStyle.paddingBottom || '0') || 0;<br />
var viewerBottomGutter = outputPaddingBottom + 8;<br />
<br />
/*<br />
The white source viewer must sit inside the 080808 well, with the same<br />
visible lower closing thickness as the left/right well spacing. 045 left<br />
only output padding below the viewer, making the bottom closure look<br />
thinner than the sides. Keep an extra 8px so the bottom reads as a real<br />
well/frame closing instead of a thin line above the bottom nav.<br />
*/<br />
mainBottom = outputRect.bottom - viewerBottomGutter;<br />
<br />
if (bottomNav) {<br />
mainBottom = Math.min(mainBottom, bottomNav.getBoundingClientRect().top - 24);<br />
}<br />
<br />
viewerHeight = Math.max(260, Math.round(mainBottom - viewerTop));<br />
<br />
viewer.style.setProperty('height', viewerHeight + 'px', 'important');<br />
viewer.style.setProperty('max-height', viewerHeight + 'px', 'important');<br />
viewer.scrollTop = currentScrollTop;<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
fallbackText = source.textContent || '';<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.insertBefore(viewer, source);<br />
}<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
applySystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
<br />
if (viewer.getAttribute('data-clbi-raw-title') === pageName && viewer.getAttribute('data-clbi-raw-loaded') === '1') {<br />
return;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
applySystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
applySystemDocSourceViewerLayoutForShell();<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
var existing;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
existing = document.getElementById('clbi-system-doc-indicator-row');<br />
if (existing && existing.parentNode) { existing.parentNode.removeChild(existing); }<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.addEventListener('resize', function () {<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
window.setTimeout(applySystemDocSourceViewerLayoutForShell, 0);<br />
}<br />
});<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
renderSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
layoutSystemDocSourceViewer: applySystemDocSourceViewerLayoutForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2466
미디어위키:Common.js
2026-06-02T20:05:55Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('box-sizing');<br />
node.style.removeProperty('flex');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('max-height');<br />
node.style.removeProperty('overflow');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('background');<br />
node.style.removeProperty('color');<br />
});<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function applySystemDocSourceViewerLayoutForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var main = document.querySelector('.liberty-content-main');<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
var indicator = document.getElementById('clbi-system-doc-indicator-row');<br />
var bottomNav = document.getElementById('clbi-bottom-nav-wrap');<br />
var viewerTop;<br />
var mainBottom;<br />
var viewerHeight;<br />
var currentScrollTop;<br />
<br />
if (!output || !main || !viewer || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
output.style.setProperty('display', 'flex', 'important');<br />
output.style.setProperty('flex-direction', 'column', 'important');<br />
output.style.setProperty('min-height', '0', 'important');<br />
output.style.setProperty('height', 'auto', 'important');<br />
output.style.setProperty('overflow', 'hidden', 'important');<br />
output.style.setProperty('position', 'relative', 'important');<br />
<br />
Array.prototype.slice.call(output.children || []).forEach(function (el) {<br />
if (!el || el === viewer || el === indicator) return;<br />
el.style.setProperty('flex', '0 0 auto', 'important');<br />
});<br />
<br />
main.style.setProperty('display', 'flex', 'important');<br />
main.style.setProperty('flex-direction', 'column', 'important');<br />
main.style.setProperty('min-height', '0', 'important');<br />
main.style.setProperty('overflow', 'hidden', 'important');<br />
<br />
viewer.style.setProperty('display', 'block', 'important');<br />
viewer.style.setProperty('box-sizing', 'border-box', 'important');<br />
viewer.style.setProperty('flex', '0 0 auto', 'important');<br />
viewer.style.setProperty('width', '100%', 'important');<br />
viewer.style.setProperty('max-width', 'none', 'important');<br />
viewer.style.setProperty('min-height', '0', 'important');<br />
viewer.style.setProperty('margin', '8px 0 0', 'important');<br />
viewer.style.setProperty('padding', '8px 10px', 'important');<br />
viewer.style.setProperty('overflow', 'auto', 'important');<br />
viewer.style.setProperty('background', '#f3f6f7', 'important');<br />
viewer.style.setProperty('color', '#111111', 'important');<br />
viewer.style.setProperty('border', '0', 'important');<br />
viewer.style.setProperty('outline', 'none', 'important');<br />
viewer.style.setProperty('font-family', "Consolas, Monaco, 'Courier New', monospace", 'important');<br />
viewer.style.setProperty('font-size', '12px', 'important');<br />
viewer.style.setProperty('line-height', '1.45', 'important');<br />
viewer.style.setProperty('white-space', 'pre', 'important');<br />
viewer.style.setProperty('tab-size', '4');<br />
viewer.style.setProperty('scrollbar-gutter', 'stable');<br />
<br />
viewerTop = viewer.getBoundingClientRect().top;<br />
<br />
/*<br />
The source viewer lives inside .mw-parser-output, not directly inside<br />
.liberty-content-main. 044 sized the viewer against the outer frame<br />
bottom, so the white source panel covered the inner-well bottom padding<br />
and visually erased the #1d1d1d closing frame above the bottom nav.<br />
<br />
Use the inner well's content bottom instead:<br />
.liberty-content-main supplies the outer 1d1d1d frame,<br />
.mw-parser-output supplies the 080808 well and its 8px inner padding,<br />
and #clbi-system-source-viewer ends before that bottom padding.<br />
*/<br />
var outputRect = output.getBoundingClientRect();<br />
var outputStyle = window.getComputedStyle(output);<br />
var outputPaddingBottom = parseFloat(outputStyle.paddingBottom || '0') || 0;<br />
<br />
mainBottom = outputRect.bottom - outputPaddingBottom;<br />
<br />
if (bottomNav) {<br />
mainBottom = Math.min(mainBottom, bottomNav.getBoundingClientRect().top - 16);<br />
}<br />
<br />
viewerHeight = Math.max(260, Math.round(mainBottom - viewerTop));<br />
<br />
viewer.style.setProperty('height', viewerHeight + 'px', 'important');<br />
viewer.style.setProperty('max-height', viewerHeight + 'px', 'important');<br />
viewer.scrollTop = currentScrollTop;<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
fallbackText = source.textContent || '';<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.insertBefore(viewer, source);<br />
}<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
applySystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
<br />
if (viewer.getAttribute('data-clbi-raw-title') === pageName && viewer.getAttribute('data-clbi-raw-loaded') === '1') {<br />
return;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
applySystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
applySystemDocSourceViewerLayoutForShell();<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
var existing;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
existing = document.getElementById('clbi-system-doc-indicator-row');<br />
if (existing && existing.parentNode) { existing.parentNode.removeChild(existing); }<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.addEventListener('resize', function () {<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
window.setTimeout(applySystemDocSourceViewerLayoutForShell, 0);<br />
}<br />
});<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
renderSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
layoutSystemDocSourceViewer: applySystemDocSourceViewerLayoutForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2465
미디어위키:Common.js
2026-06-02T20:01:27Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
var systemDocRawFetchToken = 0;<br />
<br />
function cleanupLegacySystemDocCodeMutationsForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codepane').forEach(function (pane) {<br />
var parent;<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('box-sizing');<br />
node.style.removeProperty('flex');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('max-height');<br />
node.style.removeProperty('overflow');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('background');<br />
node.style.removeProperty('color');<br />
});<br />
}<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function getSystemDocRawUrlForShell() {<br />
var title = mw.config.get('wgPageName') || readCurrentPageNameForShell();<br />
<br />
if (window.mw && mw.util && typeof mw.util.getUrl === 'function') {<br />
return mw.util.getUrl(title, {<br />
action: 'raw',<br />
ctype: 'text/plain',<br />
_: String(Date.now())<br />
});<br />
}<br />
<br />
return '/index.php?title=' + encodeURIComponent(title) + '&action=raw&ctype=text/plain&_=' + Date.now();<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
node.style.removeProperty('display');<br />
});<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
}<br />
<br />
function applySystemDocSourceViewerLayoutForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var main = document.querySelector('.liberty-content-main');<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
var indicator = document.getElementById('clbi-system-doc-indicator-row');<br />
var bottomNav = document.getElementById('clbi-bottom-nav-wrap');<br />
var viewerTop;<br />
var mainBottom;<br />
var viewerHeight;<br />
var currentScrollTop;<br />
<br />
if (!output || !main || !viewer || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
output.style.setProperty('display', 'flex', 'important');<br />
output.style.setProperty('flex-direction', 'column', 'important');<br />
output.style.setProperty('min-height', '0', 'important');<br />
output.style.setProperty('height', 'auto', 'important');<br />
output.style.setProperty('overflow', 'hidden', 'important');<br />
output.style.setProperty('position', 'relative', 'important');<br />
<br />
Array.prototype.slice.call(output.children || []).forEach(function (el) {<br />
if (!el || el === viewer || el === indicator) return;<br />
el.style.setProperty('flex', '0 0 auto', 'important');<br />
});<br />
<br />
main.style.setProperty('display', 'flex', 'important');<br />
main.style.setProperty('flex-direction', 'column', 'important');<br />
main.style.setProperty('min-height', '0', 'important');<br />
main.style.setProperty('overflow', 'hidden', 'important');<br />
<br />
viewer.style.setProperty('display', 'block', 'important');<br />
viewer.style.setProperty('box-sizing', 'border-box', 'important');<br />
viewer.style.setProperty('flex', '0 0 auto', 'important');<br />
viewer.style.setProperty('width', '100%', 'important');<br />
viewer.style.setProperty('max-width', 'none', 'important');<br />
viewer.style.setProperty('min-height', '0', 'important');<br />
viewer.style.setProperty('margin', '8px 0 0', 'important');<br />
viewer.style.setProperty('padding', '8px 10px', 'important');<br />
viewer.style.setProperty('overflow', 'auto', 'important');<br />
viewer.style.setProperty('background', '#f3f6f7', 'important');<br />
viewer.style.setProperty('color', '#111111', 'important');<br />
viewer.style.setProperty('border', '0', 'important');<br />
viewer.style.setProperty('outline', 'none', 'important');<br />
viewer.style.setProperty('font-family', "Consolas, Monaco, 'Courier New', monospace", 'important');<br />
viewer.style.setProperty('font-size', '12px', 'important');<br />
viewer.style.setProperty('line-height', '1.45', 'important');<br />
viewer.style.setProperty('white-space', 'pre', 'important');<br />
viewer.style.setProperty('tab-size', '4');<br />
viewer.style.setProperty('scrollbar-gutter', 'stable');<br />
<br />
viewerTop = viewer.getBoundingClientRect().top;<br />
mainBottom = main.getBoundingClientRect().bottom;<br />
<br />
if (bottomNav) {<br />
mainBottom = Math.min(mainBottom, bottomNav.getBoundingClientRect().top - 8);<br />
}<br />
<br />
viewerHeight = Math.max(260, Math.round(mainBottom - viewerTop));<br />
<br />
viewer.style.setProperty('height', viewerHeight + 'px', 'important');<br />
viewer.style.setProperty('max-height', viewerHeight + 'px', 'important');<br />
viewer.scrollTop = currentScrollTop;<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var source;<br />
var viewer;<br />
var fallbackText;<br />
var pageName;<br />
var token;<br />
var currentScrollTop;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
cleanupLegacySystemDocCodeMutationsForShell();<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return;<br />
<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
fallbackText = source.textContent || '';<br />
pageName = String(mw.config.get('wgPageName') || readCurrentPageNameForShell());<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.insertBefore(viewer, source);<br />
}<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (!viewer.textContent && fallbackText) {<br />
viewer.textContent = fallbackText;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
source.style.setProperty('display', 'none', 'important');<br />
<br />
applySystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
<br />
if (viewer.getAttribute('data-clbi-raw-title') === pageName && viewer.getAttribute('data-clbi-raw-loaded') === '1') {<br />
return;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-title', pageName);<br />
token = ++systemDocRawFetchToken;<br />
<br />
fetch(getSystemDocRawUrlForShell(), { credentials: 'same-origin' })<br />
.then(function (res) {<br />
if (!res.ok) throw new Error('raw fetch failed ' + res.status);<br />
return res.text();<br />
})<br />
.then(function (text) {<br />
if (token !== systemDocRawFetchToken) return;<br />
<br />
currentScrollTop = viewer.scrollTop || 0;<br />
<br />
if (text && viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
viewer.setAttribute('data-clbi-raw-loaded', '1');<br />
applySystemDocSourceViewerLayoutForShell();<br />
viewer.scrollTop = currentScrollTop;<br />
})<br />
.catch(function () {<br />
viewer.setAttribute('data-clbi-raw-loaded', '0');<br />
applySystemDocSourceViewerLayoutForShell();<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
var existing;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
existing = document.getElementById('clbi-system-doc-indicator-row');<br />
if (existing && existing.parentNode) { existing.parentNode.removeChild(existing); }<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.addEventListener('resize', function () {<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
window.setTimeout(applySystemDocSourceViewerLayoutForShell, 0);<br />
}<br />
});<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
renderSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
refreshSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
layoutSystemDocSourceViewer: applySystemDocSourceViewerLayoutForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2464
미디어위키:Layout.css
2026-06-02T20:01:18Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
MediaWiki CSS/JS 문서는 기본 제목을 숨기고 우상단 시스템 문서 표식만 띄운다.<br />
캐시 안내문은 유지한다.<br />
원본 SyntaxHighlight 출력은 숨기고, Common.js가 만든 읽기 전용 raw viewer만 스크롤한다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(#clbi-system-source-viewer):not(#clbi-system-doc-indicator-row) {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-original-source-hidden {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page #clbi-system-source-viewer {<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
width:100% !important;<br />
max-width:none !important;<br />
min-height:0 !important;<br />
margin:8px 0 0 !important;<br />
padding:8px 10px !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
border:0 !important;<br />
outline:none !important;<br />
font-family:Consolas, Monaco, 'Courier New', monospace !important;<br />
font-size:12px !important;<br />
line-height:1.45 !important;<br />
white-space:pre !important;<br />
tab-size:4;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2463
미디어위키:Common.js
2026-06-02T14:07:10Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
function findSystemDocSourceNodeForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var children;<br />
var preferred;<br />
<br />
if (!output) return null;<br />
<br />
children = Array.prototype.slice.call(output.children || [])<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
el.id !== 'clbi-system-source-viewer' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
});<br />
<br />
preferred = children.filter(function (el) {<br />
return el.matches && el.matches('.mw-highlight, .mw-code, pre');<br />
})[0];<br />
<br />
return preferred || children.sort(function (a, b) {<br />
return (b.textContent || '').trim().length - (a.textContent || '').trim().length;<br />
})[0] || null;<br />
}<br />
<br />
function removeSystemDocSourceViewerForShell() {<br />
var viewer = document.getElementById('clbi-system-source-viewer');<br />
<br />
if (viewer && viewer.parentNode) {<br />
viewer.parentNode.removeChild(viewer);<br />
}<br />
<br />
document.querySelectorAll('.clbi-system-original-source-hidden').forEach(function (node) {<br />
node.classList.remove('clbi-system-original-source-hidden');<br />
node.removeAttribute('data-clbi-system-source-hidden');<br />
});<br />
}<br />
<br />
function renderSystemDocSourceViewerForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var source;<br />
var viewer;<br />
var text;<br />
var previousScrollTop;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
source = findSystemDocSourceNodeForShell();<br />
if (!source) return;<br />
<br />
text = source.textContent || '';<br />
viewer = document.getElementById('clbi-system-source-viewer');<br />
previousScrollTop = viewer ? viewer.scrollTop : 0;<br />
<br />
if (!viewer) {<br />
viewer = document.createElement('pre');<br />
viewer.id = 'clbi-system-source-viewer';<br />
viewer.className = 'clbi-system-source-viewer';<br />
output.insertBefore(viewer, source);<br />
}<br />
<br />
if (viewer.textContent !== text) {<br />
viewer.textContent = text;<br />
}<br />
<br />
source.classList.add('clbi-system-original-source-hidden');<br />
source.setAttribute('data-clbi-system-source-hidden', 'true');<br />
viewer.scrollTop = previousScrollTop;<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
removeSystemDocSourceViewerForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
var existing;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
existing = document.getElementById('clbi-system-doc-indicator-row');<br />
if (existing && existing.parentNode) { existing.parentNode.removeChild(existing); }<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
<br />
renderSystemDocSourceViewerForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.remove('clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
renderSystemDocSourceViewer: renderSystemDocSourceViewerForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2462
미디어위키:Layout.css
2026-06-02T14:07:01Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
MediaWiki CSS/JS 문서는 기본 제목을 숨기고 우상단 문서명 표식만 띄운다.<br />
실제 소스는 MediaWiki가 만든 SyntaxHighlight DOM을 직접 쓰지 않고,<br />
Common.js가 만든 읽기 전용 pre 소스 뷰어에서 표시한다.<br />
- 캐시 안내문은 유지한다.<br />
- 문서명 표식은 absolute 오버레이이므로 본문 흐름을 차지하지 않는다.<br />
- 소스 뷰어만 내부 스크롤 영역이 된다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
display:flex !important;<br />
flex-direction:column !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(.clbi-system-source-viewer):not(#clbi-system-doc-indicator-row) {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-original-source-hidden {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-source-viewer {<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
min-height:0 !important;<br />
height:auto !important;<br />
max-height:none !important;<br />
width:100% !important;<br />
max-width:none !important;<br />
margin:8px 0 0 !important;<br />
padding:8px 10px !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
border:0 !important;<br />
outline:none !important;<br />
font-family:Consolas, Monaco, 'Courier New', monospace !important;<br />
font-size:12px !important;<br />
line-height:1.45 !important;<br />
white-space:pre !important;<br />
tab-size:4;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2461
미디어위키:Common.js
2026-06-02T13:39:52Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
}<br />
<br />
<br />
function applySystemDocMeasuredScrollForShell() {<br />
var gap = 8;<br />
var topNav = document.querySelector('#clbi-top-nav-wrap');<br />
var bottomNav = document.querySelector('#clbi-bottom-nav-wrap');<br />
var wrapper = document.querySelector('.content-wrapper');<br />
var liberty = document.querySelector('.container-fluid.liberty-content');<br />
var main = document.querySelector('.liberty-content-main');<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var children;<br />
var target;<br />
var topBottom;<br />
var bottomTop;<br />
var wrapperTop;<br />
var wrapperHeight;<br />
var codeTop;<br />
var codeHeight;<br />
var savedScroll;<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) return;<br />
if (!topNav || !bottomNav || !wrapper || !liberty || !main || !output) return;<br />
<br />
children = Array.prototype.slice.call(output.children || []);<br />
target = children<br />
.filter(function (el) {<br />
return el &&<br />
el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
})<br />
.map(function (el) {<br />
return {<br />
el: el,<br />
length: (el.textContent || '').trim().length<br />
};<br />
})<br />
.sort(function (a, b) {<br />
return b.length - a.length;<br />
})[0];<br />
<br />
if (!target || !target.el) return;<br />
target = target.el;<br />
savedScroll = target.scrollTop || 0;<br />
<br />
topBottom = topNav.getBoundingClientRect().bottom;<br />
bottomTop = bottomNav.getBoundingClientRect().top;<br />
wrapperTop = Math.round(topBottom + gap);<br />
wrapperHeight = Math.max(240, Math.round(bottomTop - wrapperTop - gap));<br />
<br />
wrapper.style.setProperty('height', wrapperHeight + 'px', 'important');<br />
wrapper.style.setProperty('max-height', wrapperHeight + 'px', 'important');<br />
wrapper.style.setProperty('min-height', '0', 'important');<br />
wrapper.style.setProperty('overflow', 'visible', 'important');<br />
<br />
liberty.style.setProperty('height', 'calc(100% + 14px)', 'important');<br />
liberty.style.setProperty('max-height', 'calc(100% + 14px)', 'important');<br />
liberty.style.setProperty('min-height', '0', 'important');<br />
liberty.style.setProperty('display', 'flex', 'important');<br />
liberty.style.setProperty('flex-direction', 'column', 'important');<br />
<br />
main.style.setProperty('height', '100%', 'important');<br />
main.style.setProperty('min-height', '0', 'important');<br />
main.style.setProperty('display', 'flex', 'important');<br />
main.style.setProperty('flex-direction', 'column', 'important');<br />
main.style.setProperty('overflow', 'hidden', 'important');<br />
<br />
output.style.setProperty('display', 'flex', 'important');<br />
output.style.setProperty('flex-direction', 'column', 'important');<br />
output.style.setProperty('flex', '1 1 auto', 'important');<br />
output.style.setProperty('min-height', '0', 'important');<br />
output.style.setProperty('height', 'auto', 'important');<br />
output.style.setProperty('overflow', 'hidden', 'important');<br />
output.style.setProperty('position', 'relative', 'important');<br />
<br />
children.forEach(function (el) {<br />
if (el === target) return;<br />
el.style.setProperty('flex', '0 0 auto', 'important');<br />
});<br />
<br />
codeTop = target.getBoundingClientRect().top;<br />
codeHeight = Math.max(220, Math.round(main.getBoundingClientRect().bottom - codeTop - gap));<br />
<br />
target.style.setProperty('display', 'block', 'important');<br />
target.style.setProperty('box-sizing', 'border-box', 'important');<br />
target.style.setProperty('flex', '1 1 0', 'important');<br />
target.style.setProperty('min-height', '0', 'important');<br />
target.style.setProperty('height', codeHeight + 'px', 'important');<br />
target.style.setProperty('max-height', codeHeight + 'px', 'important');<br />
target.style.setProperty('overflow', 'auto', 'important');<br />
target.style.setProperty('margin', '8px 0 0', 'important');<br />
target.style.setProperty('padding', '0', 'important');<br />
target.style.setProperty('background', '#f3f6f7', 'important');<br />
target.style.setProperty('color', '#111111', 'important');<br />
target.style.setProperty('scrollbar-gutter', 'stable', 'important');<br />
<br />
target.querySelectorAll('pre, code').forEach(function (el) {<br />
el.style.setProperty('margin', '0', 'important');<br />
el.style.setProperty('max-width', 'none', 'important');<br />
});<br />
<br />
target.scrollTop = savedScroll;<br />
}<br />
<br />
function scheduleSystemDocMeasuredScrollForShell() {<br />
if (!isMediaWikiSystemAssetPageForShell()) return;<br />
window.requestAnimationFrame(function () {<br />
applySystemDocMeasuredScrollForShell();<br />
});<br />
window.setTimeout(applySystemDocMeasuredScrollForShell, 80);<br />
window.setTimeout(applySystemDocMeasuredScrollForShell, 250);<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
<br />
scheduleSystemDocMeasuredScrollForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page', 'clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
applySystemDocMeasuredScroll: applySystemDocMeasuredScrollForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2460
미디어위키:Layout.css
2026-06-02T13:39:44Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
시스템 CSS/JS 문서의 기본 제목은 숨기고 우상단 문서명 표식만 띄운다.<br />
이 표식은 absolute 오버레이이며, 안내문/코드 본문 흐름에 참여하지 않는다.<br />
코드 영역의 실제 높이와 스크롤은 Common.js가 현재 DOM 측정값으로 인라인 적용한다.<br />
*/<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2459
미디어위키:Common.js
2026-06-02T13:34:23Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page', 'clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2458
미디어위키:Layout.css
2026-06-02T13:34:13Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
CSS/JS 시스템 문서는 MediaWiki 기본 제목을 숨기고 우상단 시스템 문서 표식만 띄운다.<br />
캐시 안내문은 유지한다. 실제 코드 DOM은 .mw-parser-output의 직접 자식 .mw-highlight이다.<br />
새 래퍼를 만들지 않고 이 실제 코드 DOM 자체를 내부 스크롤 영역으로 사용한다.<br />
*/<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
text-align:right !important;<br />
font-size:22px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
max-width:500px !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
display:flex !important;<br />
flex-direction:column !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(.mw-highlight):not(.mw-code):not(pre):not(#clbi-system-doc-indicator-row) {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-highlight,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-code,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > pre {<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
min-height:0 !important;<br />
height:auto !important;<br />
max-height:none !important;<br />
margin:8px 0 0 !important;<br />
padding:0 !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-highlight pre,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-code pre,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > pre {<br />
margin:0 !important;<br />
max-width:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2457
미디어위키:Common.js
2026-06-02T13:30:14Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
}<br />
<br />
<br />
function clearSystemDocCodeboxForShell() {<br />
var nodes = document.querySelectorAll('.clbi-system-doc-codebox');<br />
<br />
nodes.forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
node.removeAttribute('data-clbi-system-doc-codebox');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('box-sizing');<br />
node.style.removeProperty('flex');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('overflow');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('background');<br />
node.style.removeProperty('color');<br />
});<br />
}<br />
<br />
function applySystemDocCodeboxForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var children;<br />
var target;<br />
var scrollTop;<br />
<br />
clearSystemDocCodeboxForShell();<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
children = Array.prototype.slice.call(output.children || []);<br />
target = children<br />
.filter(function (el) {<br />
return el && el.nodeType === 1 &&<br />
el.id !== 'clbi-system-doc-indicator-row' &&<br />
!el.classList.contains('catlinks') &&<br />
(el.textContent || '').trim().length > 200;<br />
})<br />
.map(function (el) {<br />
return {<br />
el: el,<br />
length: (el.textContent || '').trim().length<br />
};<br />
})<br />
.sort(function (a, b) {<br />
return b.length - a.length;<br />
})[0];<br />
<br />
if (!target || !target.el) return;<br />
<br />
scrollTop = target.el.scrollTop || 0;<br />
target.el.classList.add('clbi-system-doc-codebox');<br />
target.el.setAttribute('data-clbi-system-doc-codebox', 'true');<br />
<br />
/*<br />
CSS만으로는 MediaWiki 코드 렌더러의 실제 출력 DOM이 버전별로 흔들린다.<br />
콘솔 검증 결과, 현재 코드 본문은 .mw-parser-output의 직접 자식 .mw-highlight다.<br />
새 래퍼를 만들지 않고 실제 코드 DOM 자체를 스크롤 박스로 고정한다.<br />
*/<br />
output.style.setProperty('display', 'flex', 'important');<br />
output.style.setProperty('flex-direction', 'column', 'important');<br />
output.style.setProperty('overflow', 'hidden', 'important');<br />
output.style.setProperty('min-height', '0', 'important');<br />
<br />
children.forEach(function (el) {<br />
if (el === target.el) return;<br />
el.style.setProperty('flex', '0 0 auto', 'important');<br />
});<br />
<br />
target.el.style.setProperty('display', 'block', 'important');<br />
target.el.style.setProperty('box-sizing', 'border-box', 'important');<br />
target.el.style.setProperty('flex', '1 1 0', 'important');<br />
target.el.style.setProperty('min-height', '0', 'important');<br />
target.el.style.setProperty('height', 'auto', 'important');<br />
target.el.style.setProperty('overflow', 'auto', 'important');<br />
target.el.style.setProperty('margin', '8px 0 0', 'important');<br />
target.el.style.setProperty('padding', '0', 'important');<br />
target.el.style.setProperty('background', '#f3f6f7', 'important');<br />
target.el.style.setProperty('color', '#111', 'important');<br />
<br />
target.el.querySelectorAll('pre, code').forEach(function (node) {<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('max-width', 'none', 'important');<br />
});<br />
<br />
if (scrollTop) {<br />
target.el.scrollTop = scrollTop;<br />
}<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
<br />
applySystemDocCodeboxForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page', 'clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2456
미디어위키:Layout.css
2026-06-02T13:30:06Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/* CSS/JS 문서는 기본 제목을 숨기고 우상단 시스템 문서 표식만 띄운다. */<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:560px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:520px !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
white-space:nowrap !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 실제 코드 DOM 자체에 붙는 클래스다. 새 래퍼를 만들지 않는다. */<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
display:flex !important;<br />
flex-direction:column !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(.clbi-system-doc-codebox) {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codebox {<br />
display:block !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
min-height:0 !important;<br />
height:auto !important;<br />
overflow:auto !important;<br />
margin:8px 0 0 !important;<br />
padding:0 !important;<br />
background:#f3f6f7 !important;<br />
color:#111 !important;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codebox pre,<br />
body.clbi-system-doc-page .clbi-system-doc-codebox code {<br />
margin:0 !important;<br />
max-width:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2455
미디어위키:Common.js
2026-06-02T13:26:23Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
var lastSystemDocPageKey = '';<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) ||<br />
contentModel === 'css' ||<br />
contentModel === 'javascript' ||<br />
contentModel === 'sanitized-css');<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function resetSystemDocRuntimeStyles() {<br />
document.querySelectorAll('[data-clbi-system-doc-style="1"]').forEach(function (node) {<br />
node.removeAttribute('data-clbi-system-doc-style');<br />
node.removeAttribute('style');<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
lastSystemDocPageKey = '';<br />
resetSystemDocRuntimeStyles();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var main;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (!row) {<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
type = row.querySelector('.clbi-system-doc-type');<br />
title = row.querySelector('.clbi-system-doc-title');<br />
<br />
if (type) type.textContent = ext;<br />
if (title) title.textContent = pageName;<br />
}<br />
<br />
function setImportantStyle(node, prop, value) {<br />
if (!node || !node.style) return;<br />
node.setAttribute('data-clbi-system-doc-style', '1');<br />
node.style.setProperty(prop, value, 'important');<br />
}<br />
<br />
function applySystemDocCodeScrollForShell() {<br />
var output;<br />
var main;<br />
var bottom;<br />
var children;<br />
var target;<br />
var targetLen = 0;<br />
var savedScrollTop;<br />
var savedScrollLeft;<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
bottom = document.querySelector('#clbi-bottom-nav-wrap');<br />
<br />
if (!output || !main || !bottom) return;<br />
<br />
children = Array.prototype.slice.call(output.children || []);<br />
<br />
children.forEach(function (node) {<br />
var length;<br />
<br />
if (!node || node.id === 'clbi-system-doc-indicator-row') return;<br />
<br />
length = String(node.textContent || '').trim().length;<br />
<br />
if (length > targetLen) {<br />
target = node;<br />
targetLen = length;<br />
}<br />
});<br />
<br />
if (!target || targetLen < 200) return;<br />
<br />
savedScrollTop = target.scrollTop || 0;<br />
savedScrollLeft = target.scrollLeft || 0;<br />
<br />
setImportantStyle(output, 'display', 'flex');<br />
setImportantStyle(output, 'flex-direction', 'column');<br />
setImportantStyle(output, 'overflow', 'hidden');<br />
setImportantStyle(output, 'min-height', '0');<br />
<br />
children.forEach(function (node) {<br />
if (node === target || node.id === 'clbi-system-doc-indicator-row') return;<br />
setImportantStyle(node, 'flex', '0 0 auto');<br />
});<br />
<br />
setImportantStyle(target, 'display', 'block');<br />
setImportantStyle(target, 'box-sizing', 'border-box');<br />
setImportantStyle(target, 'flex', '1 1 0');<br />
setImportantStyle(target, 'min-height', '0');<br />
setImportantStyle(target, 'height', 'auto');<br />
setImportantStyle(target, 'overflow', 'auto');<br />
setImportantStyle(target, 'margin', '8px 0 0');<br />
setImportantStyle(target, 'padding', '0');<br />
setImportantStyle(target, 'background', '#f3f6f7');<br />
setImportantStyle(target, 'color', '#111');<br />
<br />
target.querySelectorAll('pre, code').forEach(function (node) {<br />
setImportantStyle(node, 'margin', '0');<br />
setImportantStyle(node, 'max-width', 'none');<br />
});<br />
<br />
if (savedScrollTop || savedScrollLeft) {<br />
target.scrollTop = savedScrollTop;<br />
target.scrollLeft = savedScrollLeft;<br />
}<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
applySystemDocCodeScrollForShell();<br />
} else if (isSystemPage) {<br />
removeSystemDocIndicatorForShell();<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
removeSystemDocIndicatorForShell();<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 120);<br />
window.setTimeout(applyPageShellClasses, 450);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 80);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
applySystemDocCodeScroll: applySystemDocCodeScrollForShell<br />
};<br />
}());<br />
<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2454
미디어위키:Layout.css
2026-06-02T13:26:12Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/* CSS/JS 문서는 기본 제목을 숨기고 우상단 시스템 문서 표식만 띄운다. */<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:560px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:520px !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
white-space:nowrap !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2453
미디어위키:Common.js
2026-06-02T13:14:56Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
function unmarkSystemDocCodeBoxForShell() {<br />
document.querySelectorAll('.clbi-system-doc-codebox').forEach(function (node) {<br />
node.classList.remove('clbi-system-doc-codebox');<br />
});<br />
}<br />
<br />
function markSystemDocCodeBoxForShell() {<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var candidates;<br />
var best = null;<br />
var bestLength = 0;<br />
var codeBox;<br />
<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
candidates = Array.prototype.slice.call(output.querySelectorAll('.mw-highlight, .mw-code, pre'));<br />
<br />
candidates.forEach(function (node) {<br />
var length;<br />
if (!node || node.closest('#clbi-system-doc-indicator-row')) return;<br />
length = String(node.textContent || '').trim().length;<br />
if (length > bestLength) {<br />
best = node;<br />
bestLength = length;<br />
}<br />
});<br />
<br />
unmarkSystemDocCodeBoxForShell();<br />
if (!best || bestLength < 200) return;<br />
<br />
codeBox = best;<br />
while (codeBox.parentElement && codeBox.parentElement !== output) {<br />
codeBox = codeBox.parentElement;<br />
}<br />
<br />
if (!codeBox || codeBox === output) {<br />
codeBox = best;<br />
}<br />
<br />
codeBox.classList.add('clbi-system-doc-codebox');<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
unmarkSystemDocCodeBoxForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var main;<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.getElementById('clbi-system-doc-indicator-row');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (!row) {<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
} else {<br />
document.body.appendChild(row);<br />
}<br />
}<br />
<br />
type = row.querySelector('.clbi-system-doc-type');<br />
title = row.querySelector('.clbi-system-doc-title');<br />
<br />
if (type) type.textContent = ext;<br />
if (title) title.textContent = pageName;<br />
<br />
markSystemDocCodeBoxForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page');<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
removeSystemDocIndicatorForShell();<br />
}<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2452
미디어위키:Layout.css
2026-06-02T13:14:40Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
MediaWiki CSS/JS 문서는 기본 제목만 숨기고, 문서명은 우상단 오버레이로 표시한다.<br />
캐시 안내문은 원래 문서 안내로 유지한다.<br />
코드 출력 영역은 JS가 실제 코드 DOM에 .clbi-system-doc-codebox를 붙이고,<br />
그 요소가 내부 스크롤을 담당한다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > :not(.clbi-system-doc-codebox):not(#clbi-system-doc-indicator-row) {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codebox {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
min-height:0 !important;<br />
height:auto !important;<br />
max-height:none !important;<br />
margin:8px 0 0 !important;<br />
padding:0 !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111111 !important;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codebox pre,<br />
body.clbi-system-doc-page .clbi-system-doc-codebox code,<br />
body.clbi-system-doc-page .clbi-system-doc-codebox .mw-code,<br />
body.clbi-system-doc-page .clbi-system-doc-codebox .mw-highlight {<br />
max-width:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codebox pre {<br />
margin:0 !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
text-align:right !important;<br />
font-size:22px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
max-width:500px !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2451
미디어위키:Common.js
2026-06-01T21:37:33Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
function unwrapSystemDocCodePaneForShell() {<br />
var panes = document.querySelectorAll('.clbi-system-doc-codepane');<br />
<br />
panes.forEach(function (pane) {<br />
var parent;<br />
if (!pane || !pane.parentNode) return;<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
}<br />
<br />
<br />
function clearSystemDocViewportForShell() {<br />
var wrapper = document.querySelector('.content-wrapper');<br />
var liberty = document.querySelector('.container-fluid.liberty-content');<br />
var main = document.querySelector('.liberty-content-main');<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var nodes = [<br />
[wrapper, ['height', 'max-height', 'min-height', 'overflow']],<br />
[liberty, ['height', 'max-height', 'min-height', 'display', 'flex-direction']],<br />
[main, ['height', 'min-height', 'display', 'flex-direction', 'overflow']],<br />
[output, ['flex', 'min-height', 'height', 'overflow', 'position']]<br />
];<br />
<br />
nodes.forEach(function (item) {<br />
var node = item[0];<br />
var props = item[1];<br />
if (!node || !node.style) return;<br />
props.forEach(function (prop) {<br />
node.style.removeProperty(prop);<br />
});<br />
});<br />
<br />
document.querySelectorAll('[data-clbi-system-codebox="true"]').forEach(function (node) {<br />
['display', 'box-sizing', 'height', 'max-height', 'overflow', 'margin'].forEach(function (prop) {<br />
node.style.removeProperty(prop);<br />
});<br />
node.removeAttribute('data-clbi-system-codebox');<br />
});<br />
<br />
document.querySelectorAll('[data-clbi-system-codebox-pre="true"]').forEach(function (node) {<br />
['margin', 'max-width'].forEach(function (prop) {<br />
node.style.removeProperty(prop);<br />
});<br />
node.removeAttribute('data-clbi-system-codebox-pre');<br />
});<br />
}<br />
<br />
function findSystemDocCodeBoxForShell(output) {<br />
var candidates;<br />
var i;<br />
var node;<br />
var text;<br />
<br />
if (!output) return null;<br />
<br />
candidates = Array.prototype.slice.call(output.querySelectorAll('.mw-highlight, .mw-code, pre'));<br />
<br />
for (i = 0; i < candidates.length; i += 1) {<br />
node = candidates[i];<br />
if (!node || node.closest('#clbi-system-doc-indicator-row')) continue;<br />
text = String(node.textContent || '').trim();<br />
if (text.length > 200) {<br />
return node.closest('.mw-highlight') || node.closest('.mw-code') || node;<br />
}<br />
}<br />
<br />
return null;<br />
}<br />
<br />
function applySystemDocViewportForShell() {<br />
var gap = 8;<br />
var targetGap = 8;<br />
var topNav = document.querySelector('#clbi-top-nav-wrap');<br />
var bottomNav = document.querySelector('#clbi-bottom-nav-wrap');<br />
var wrapper = document.querySelector('.content-wrapper');<br />
var liberty = document.querySelector('.container-fluid.liberty-content');<br />
var main = document.querySelector('.liberty-content-main');<br />
var output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
var codeBox;<br />
var topBottom;<br />
var bottomTop;<br />
var wrapperTop;<br />
var wrapperHeight;<br />
var currentGap;<br />
var correction;<br />
var codeTop;<br />
var codeHeight;<br />
<br />
if (!isMediaWikiSystemAssetPageForShell()) {<br />
clearSystemDocViewportForShell();<br />
return;<br />
}<br />
<br />
unwrapSystemDocCodePaneForShell();<br />
<br />
if (!topNav || !bottomNav || !wrapper || !liberty || !main || !output) return;<br />
<br />
topBottom = topNav.getBoundingClientRect().bottom;<br />
bottomTop = bottomNav.getBoundingClientRect().top;<br />
wrapperTop = Math.round(topBottom + gap);<br />
wrapperHeight = Math.max(240, Math.round(bottomTop - wrapperTop - gap));<br />
<br />
wrapper.style.setProperty('height', wrapperHeight + 'px', 'important');<br />
wrapper.style.setProperty('max-height', wrapperHeight + 'px', 'important');<br />
wrapper.style.setProperty('min-height', '0', 'important');<br />
wrapper.style.setProperty('overflow', 'visible', 'important');<br />
<br />
liberty.style.setProperty('height', 'calc(100% + 14px)', 'important');<br />
liberty.style.setProperty('max-height', 'calc(100% + 14px)', 'important');<br />
liberty.style.setProperty('min-height', '0', 'important');<br />
liberty.style.setProperty('display', 'flex', 'important');<br />
liberty.style.setProperty('flex-direction', 'column', 'important');<br />
<br />
main.style.setProperty('height', '100%', 'important');<br />
main.style.setProperty('min-height', '0', 'important');<br />
main.style.setProperty('display', 'flex', 'important');<br />
main.style.setProperty('flex-direction', 'column', 'important');<br />
main.style.setProperty('overflow', 'hidden', 'important');<br />
<br />
output.style.setProperty('flex', '1 1 auto', 'important');<br />
output.style.setProperty('min-height', '0', 'important');<br />
output.style.setProperty('height', 'auto', 'important');<br />
output.style.setProperty('overflow', 'hidden', 'important');<br />
output.style.setProperty('position', 'relative', 'important');<br />
<br />
currentGap = Math.round(bottomTop - main.getBoundingClientRect().bottom);<br />
correction = 14 + currentGap - targetGap;<br />
correction = Math.max(-20, Math.min(30, correction));<br />
liberty.style.setProperty('height', 'calc(100% + ' + correction + 'px)', 'important');<br />
liberty.style.setProperty('max-height', 'calc(100% + ' + correction + 'px)', 'important');<br />
<br />
codeBox = findSystemDocCodeBoxForShell(output);<br />
if (!codeBox) return;<br />
<br />
codeBox.setAttribute('data-clbi-system-codebox', 'true');<br />
codeBox.style.setProperty('display', 'block', 'important');<br />
codeBox.style.setProperty('box-sizing', 'border-box', 'important');<br />
codeBox.style.setProperty('overflow', 'auto', 'important');<br />
codeBox.style.setProperty('margin', '8px 0 0', 'important');<br />
<br />
codeTop = codeBox.getBoundingClientRect().top;<br />
codeHeight = Math.max(220, Math.round(main.getBoundingClientRect().bottom - codeTop - gap));<br />
<br />
codeBox.style.setProperty('height', codeHeight + 'px', 'important');<br />
codeBox.style.setProperty('max-height', codeHeight + 'px', 'important');<br />
<br />
codeBox.querySelectorAll('pre').forEach(function (pre) {<br />
pre.setAttribute('data-clbi-system-codebox-pre', 'true');<br />
pre.style.setProperty('margin', '0', 'important');<br />
pre.style.setProperty('max-width', 'none', 'important');<br />
});<br />
}<br />
<br />
function scheduleSystemDocViewportForShell() {<br />
window.requestAnimationFrame(function () {<br />
applySystemDocViewportForShell();<br />
});<br />
window.setTimeout(applySystemDocViewportForShell, 80);<br />
window.setTimeout(applySystemDocViewportForShell, 250);<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
unwrapSystemDocCodePaneForShell();<br />
clearSystemDocViewportForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
<br />
scheduleSystemDocViewportForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page', 'clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
clearSystemDocViewportForShell();<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
clearSystemDocViewportForShell();<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.addEventListener('resize', function () {<br />
scheduleSystemDocViewportForShell();<br />
});<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell,<br />
applySystemDocViewport: applySystemDocViewportForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2450
미디어위키:Layout.css
2026-06-01T21:37:23Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
CSS/JS 시스템 문서에서는 MediaWiki 기본 제목을 숨기고,<br />
문서명은 우상단 오버레이로만 표시한다.<br />
이 표식은 본문 흐름을 차지하지 않는다.<br />
코드/안내문은 기존 .mw-parser-output 내부에 그대로 두고,<br />
024 안정 레이아웃의 내부 스크롤 구조를 유지한다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
flex:1 1 auto !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;width:max-content !important;max-width:520px !important;box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
text-align:right !important;<br />
font-size:22px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
max-width:500px !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
body.clbi-system-doc-page [data-clbi-system-codebox="true"] {<br />
box-sizing:border-box !important;<br />
overflow:auto !important;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page [data-clbi-system-codebox="true"] pre {<br />
margin:0 !important;<br />
max-width:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2449
미디어위키:Common.js
2026-06-01T21:29:12Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
<br />
function unwrapSystemDocCodePaneForShell() {<br />
var panes = document.querySelectorAll('.clbi-system-doc-codepane');<br />
<br />
panes.forEach(function (pane) {<br />
var parent;<br />
if (!pane || !pane.parentNode) return;<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
});<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
unwrapSystemDocCodePaneForShell();<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page', 'clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2448
미디어위키:Layout.css
2026-06-01T21:29:04Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
CSS/JS 시스템 문서에서는 MediaWiki 기본 제목을 숨기고,<br />
문서명은 우상단 오버레이로만 표시한다.<br />
이 표식은 본문 흐름을 차지하지 않는다.<br />
코드/안내문은 기존 .mw-parser-output 내부에 그대로 두고,<br />
024 안정 레이아웃의 내부 스크롤 구조를 유지한다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
flex:1 1 auto !important;<br />
min-height:0 !important;<br />
overflow:auto !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:8px !important;<br />
right:8px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 16px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;width:max-content !important;max-width:520px !important;box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
text-align:right !important;<br />
font-size:22px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
max-width:500px !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2447
미디어위키:Common.js
2026-06-01T21:24:11Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
<br />
unwrapSystemDocCodePaneForShell();<br />
}<br />
<br />
<br />
function unwrapSystemDocCodePaneForShell() {<br />
var pane = document.querySelector('.clbi-system-doc-codepane');<br />
var parent;<br />
<br />
if (!pane || !pane.parentNode) return;<br />
<br />
parent = pane.parentNode;<br />
while (pane.firstChild) {<br />
parent.insertBefore(pane.firstChild, pane);<br />
}<br />
parent.removeChild(pane);<br />
}<br />
<br />
function isSystemDocCodeNodeForShell(node) {<br />
if (!node || node.nodeType !== 1) return false;<br />
if (node.id === 'clbi-system-doc-indicator-row') return false;<br />
<br />
return node.matches('pre, .mw-highlight, .mw-code, .mw-highlight-lines, .mw-highlight-linenos') ||<br />
!!node.querySelector('pre, code, .mw-highlight, .mw-code');<br />
}<br />
<br />
function prepareSystemDocCodePaneForShell() {<br />
var output;<br />
var pane;<br />
var children;<br />
var startIndex;<br />
var i;<br />
<br />
output = document.querySelector('.liberty-content-main .mw-parser-output');<br />
if (!output || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pane = output.querySelector(':scope > .clbi-system-doc-codepane');<br />
if (pane) return;<br />
<br />
children = Array.prototype.slice.call(output.children || []);<br />
startIndex = -1;<br />
<br />
for (i = 0; i < children.length; i += 1) {<br />
if (isSystemDocCodeNodeForShell(children[i])) {<br />
startIndex = i;<br />
break;<br />
}<br />
}<br />
<br />
if (startIndex < 0) return;<br />
<br />
pane = document.createElement('div');<br />
pane.className = 'clbi-system-doc-codepane';<br />
output.insertBefore(pane, children[startIndex]);<br />
<br />
for (i = startIndex; i < children.length; i += 1) {<br />
if (children[i].parentNode === output && children[i].id !== 'clbi-system-doc-indicator-row') {<br />
pane.appendChild(children[i]);<br />
}<br />
}<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
<br />
prepareSystemDocCodePaneForShell();<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page', 'clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2446
미디어위키:Layout.css
2026-06-01T21:23:50Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
MediaWiki CSS/JS 문서는 기본 제목을 숨기고 우상단 시스템 문서 표식만 띄운다.<br />
캐시 안내문은 유지한다.<br />
실제 코드 본문은 JS가 .clbi-system-doc-codepane으로 묶고, 그 패널 안에서 스크롤한다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > p,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > ul,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > ol,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > dl,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-parser-output-warning {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codepane {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
min-height:0 !important;<br />
height:auto !important;<br />
margin:8px 0 0 !important;<br />
padding:0 !important;<br />
overflow:auto !important;<br />
background:#f3f6f7 !important;<br />
color:#111 !important;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codepane > * {<br />
margin-top:0 !important;<br />
margin-bottom:0 !important;<br />
max-width:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page .clbi-system-doc-codepane pre,<br />
body.clbi-system-doc-page .clbi-system-doc-codepane code,<br />
body.clbi-system-doc-page .clbi-system-doc-codepane .mw-code,<br />
body.clbi-system-doc-page .clbi-system-doc-codepane .mw-highlight {<br />
max-width:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:10px !important;<br />
right:10px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 20px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:560px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:7px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:10px !important;<br />
line-height:1 !important;<br />
letter-spacing:0.08em !important;<br />
text-transform:uppercase !important;<br />
color:#8a8a8a !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
align-items:center !important;<br />
height:14px !important;<br />
padding:0 5px !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:520px !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
text-align:right !important;<br />
font-size:24px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:0.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78) !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2445
미디어위키:Layout.css
2026-06-01T21:20:32Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100% !important;<br />
overflow-x:auto !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
CSS/JS 문서에서는 MediaWiki 기본 제목만 숨기고,<br />
문서명 표시는 본문 흐름에서 빠진 우상단 오버레이로 처리한다.<br />
캐시 안내문은 문서 내용의 일부로 유지한다.<br />
코드 본문은 남은 높이를 채우는 내부 스크롤 패널로 고정한다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
/* 캐시 안내문은 원래 문서 안내로 유지한다. */<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > p,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > ul,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > ol,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-parser-output-warning {<br />
flex:0 0 auto !important;<br />
}<br />
<br />
/* 실제 코드 출력 영역. MediaWiki 버전에 따라 wrapper 구조가 다르므로 모두 받는다. */<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-highlight,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-code,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > pre,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > div:has(.mw-highlight),<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > div:has(pre) {<br />
flex:1 1 auto !important;<br />
min-height:0 !important;<br />
height:auto !important;<br />
max-height:none !important;<br />
margin:8px 0 0 !important;<br />
box-sizing:border-box !important;<br />
overflow:auto !important;<br />
background:#f5f8fa !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-highlight:first-child,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > .mw-code:first-child,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > pre:first-child,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > div:has(.mw-highlight):first-child,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > div:has(pre):first-child {<br />
margin-top:0 !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output .mw-highlight,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output .mw-code,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output pre,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output code {<br />
max-width:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output .mw-highlight {<br />
height:100% !important;<br />
min-height:0 !important;<br />
box-sizing:border-box !important;<br />
overflow:auto !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output .mw-highlight pre,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output pre.mw-code {<br />
min-height:100% !important;<br />
height:auto !important;<br />
max-height:none !important;<br />
margin:0 !important;<br />
box-sizing:border-box !important;<br />
overflow:visible !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:10px !important;<br />
right:10px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 20px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:560px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:6px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:9px !important;<br />
line-height:1 !important;<br />
letter-spacing:.08em !important;<br />
text-transform:uppercase !important;<br />
white-space:nowrap !important;<br />
color:#8a8a8a !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
height:14px !important;<br />
min-width:20px !important;<br />
padding:0 5px !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:540px !important;<br />
text-align:right !important;<br />
font-size:20px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2444
미디어위키:Layout.css
2026-06-01T21:17:15Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100% !important;<br />
overflow-x:auto !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시<br />
----------------------------------------- */<br />
<br />
/*<br />
CSS/JS 문서에서는 MediaWiki 기본 제목만 숨기고,<br />
문서명 표시는 본문 흐름에서 빠진 우상단 오버레이로 처리한다.<br />
캐시 안내문은 문서 내용의 일부로 유지한다.<br />
*/<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:auto !important;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output pre,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output code,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output .mw-code,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output .mw-highlight {<br />
max-width:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:10px !important;<br />
right:10px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 20px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:560px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:6px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:9px !important;<br />
line-height:1 !important;<br />
letter-spacing:.08em !important;<br />
text-transform:uppercase !important;<br />
white-space:nowrap !important;<br />
color:#8a8a8a !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
height:14px !important;<br />
min-width:20px !important;<br />
padding:0 5px !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:540px !important;<br />
text-align:right !important;<br />
font-size:20px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2443
미디어위키:Layout.css
2026-06-01T21:13:22Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 표시 및 내부 스크롤<br />
----------------------------------------- */<br />
<br />
body.clbi-system-doc-page .liberty-content-main {<br />
position:relative !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
/* CSS/JS 시스템 문서의 안내문은 코드 스크롤 영역을 밀지 않게 숨긴다. */<br />
body.clbi-system-doc-page #mw-clearyourcache,<br />
body.clbi-system-doc-page .mw-clearyourcache,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > p:first-child,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output > ul:first-of-type {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
max-height:none !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
overflow-y:auto !important;<br />
overflow-x:auto !important;<br />
scrollbar-gutter:stable;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output pre,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output code,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output .mw-code,<br />
body.clbi-system-doc-page .liberty-content-main .mw-parser-output .mw-highlight {<br />
max-width:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute !important;<br />
top:10px !important;<br />
right:10px !important;<br />
z-index:40 !important;<br />
width:auto !important;<br />
max-width:calc(100% - 20px) !important;<br />
height:auto !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
display:block !important;<br />
pointer-events:none !important;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
display:block !important;<br />
width:max-content !important;<br />
max-width:520px !important;<br />
box-sizing:border-box !important;<br />
padding:5px 8px 6px !important;<br />
background:#171717 !important;<br />
border:1px solid #050505 !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex !important;<br />
justify-content:flex-end !important;<br />
align-items:center !important;<br />
gap:6px !important;<br />
margin:0 0 3px 0 !important;<br />
font-size:9px !important;<br />
line-height:1 !important;<br />
letter-spacing:.08em !important;<br />
text-transform:uppercase !important;<br />
white-space:nowrap !important;<br />
color:#8a8a8a !important;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a !important;<br />
font-weight:700 !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex !important;<br />
height:14px !important;<br />
min-width:20px !important;<br />
padding:0 5px !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
background:#0d0d0d !important;<br />
border:1px solid #202020 !important;<br />
color:#c8c8c8 !important;<br />
font-weight:700 !important;<br />
white-space:nowrap !important;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block !important;<br />
max-width:500px !important;<br />
text-align:right !important;<br />
font-size:20px !important;<br />
line-height:1 !important;<br />
font-weight:900 !important;<br />
letter-spacing:.01em !important;<br />
color:#e2e2e2 !important;<br />
text-shadow:0 1px 0 rgba(0,0,0,.78) !important;<br />
white-space:nowrap !important;<br />
word-break:normal !important;<br />
overflow:hidden !important;<br />
text-overflow:ellipsis !important;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2442
미디어위키:Layout.css
2026-06-01T21:01:26Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-B. MediaWiki CSS/JS 문서 인디케이터<br />
----------------------------------------- */<br />
<br />
.clbi-system-doc-indicator-row {<br />
margin:0 0 8px 0;<br />
padding:0;<br />
display:flex;<br />
justify-content:flex-end;<br />
align-items:flex-start;<br />
flex:0 0 auto;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
min-width:320px;<br />
max-width:min(56%, 860px);<br />
padding:10px 14px 12px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid !important;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
inset 1px 0 0 rgba(255,255,255,0.012),<br />
inset -1px 0 0 rgba(0,0,0,0.38) !important;<br />
background-image:linear-gradient(to bottom, rgba(255,255,255,0.020), rgba(0,0,0,0.08));<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex;<br />
justify-content:flex-end;<br />
align-items:center;<br />
gap:8px;<br />
margin:0 0 6px 0;<br />
font-size:11px;<br />
line-height:1;<br />
letter-spacing:0.08em;<br />
text-transform:uppercase;<br />
color:#8a8a8a;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex;<br />
align-items:center;<br />
height:16px;<br />
padding:0 6px;<br />
background:#0d0d0d;<br />
border:1px solid #202020;<br />
color:#c8c8c8;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block;<br />
text-align:right;<br />
font-size:34px;<br />
line-height:1;<br />
font-weight:900;<br />
letter-spacing:0.01em;<br />
color:#e2e2e2;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78);<br />
word-break:break-word;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2441
미디어위키:Layout.css
2026-06-01T20:58:10Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-B. MediaWiki CSS/JS 문서 인디케이터<br />
----------------------------------------- */<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute;<br />
top:16px;<br />
right:16px;<br />
z-index:30;<br />
margin:0;<br />
padding:0;<br />
display:flex;<br />
justify-content:flex-end;<br />
align-items:flex-start;<br />
width:auto;<br />
max-width:calc(100% - 32px);<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
min-width:0;<br />
max-width:780px;<br />
padding:6px 10px 8px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid !important;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
inset 1px 0 0 rgba(255,255,255,0.012),<br />
inset -1px 0 0 rgba(0,0,0,0.38) !important;<br />
background-image:linear-gradient(to bottom, rgba(255,255,255,0.020), rgba(0,0,0,0.08));<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex;<br />
justify-content:flex-end;<br />
align-items:center;<br />
gap:8px;<br />
margin:0 0 4px 0;<br />
font-size:11px;<br />
line-height:1;<br />
letter-spacing:0.08em;<br />
text-transform:uppercase;<br />
color:#8a8a8a;<br />
white-space:nowrap;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex;<br />
align-items:center;<br />
height:16px;<br />
padding:0 6px;<br />
background:#0d0d0d;<br />
border:1px solid #202020;<br />
color:#c8c8c8;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block;<br />
text-align:right;<br />
font-size:27px;<br />
line-height:1;<br />
font-weight:900;<br />
letter-spacing:0.01em;<br />
color:#e2e2e2;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78);<br />
white-space:nowrap;<br />
word-break:normal;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
max-width:720px;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2440
미디어위키:Layout.css
2026-06-01T20:53:46Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-B. MediaWiki CSS/JS 문서 인디케이터<br />
----------------------------------------- */<br />
<br />
.clbi-system-doc-indicator-row {<br />
position:absolute;<br />
top:16px;<br />
right:16px;<br />
z-index:30;<br />
margin:0;<br />
padding:0;<br />
display:flex;<br />
justify-content:flex-end;<br />
align-items:flex-start;<br />
width:auto;<br />
max-width:calc(100% - 32px);<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
min-width:260px;<br />
max-width:min(52%, 780px);<br />
padding:6px 10px 8px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid !important;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
inset 1px 0 0 rgba(255,255,255,0.012),<br />
inset -1px 0 0 rgba(0,0,0,0.38) !important;<br />
background-image:linear-gradient(to bottom, rgba(255,255,255,0.020), rgba(0,0,0,0.08));<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex;<br />
justify-content:flex-end;<br />
align-items:center;<br />
gap:8px;<br />
margin:0 0 4px 0;<br />
font-size:11px;<br />
line-height:1;<br />
letter-spacing:0.08em;<br />
text-transform:uppercase;<br />
color:#8a8a8a;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex;<br />
align-items:center;<br />
height:16px;<br />
padding:0 6px;<br />
background:#0d0d0d;<br />
border:1px solid #202020;<br />
color:#c8c8c8;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block;<br />
text-align:right;<br />
font-size:30px;<br />
line-height:1;<br />
font-weight:900;<br />
letter-spacing:0.01em;<br />
color:#e2e2e2;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78);<br />
word-break:break-word;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2439
미디어위키:Common.js
2026-06-01T20:46:43Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:AnecdoteViewer.js&action=raw&ctype=text/javascript');<br />
<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var SYSTEM_TITLE_NAMESPACES = {<br />
'-1': true,<br />
'4': true,<br />
'5': true,<br />
'6': true,<br />
'7': true,<br />
'8': true,<br />
'9': true,<br />
'10': true,<br />
'11': true,<br />
'12': true,<br />
'13': true,<br />
'14': true,<br />
'15': true,<br />
'828': true,<br />
'829': true<br />
};<br />
<br />
function normalizePageNameForShell(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function readCurrentPageNameForShell() {<br />
var pageName = mw.config.get('wgPageName') || '';<br />
<br />
if (pageName) {<br />
return normalizePageNameForShell(pageName);<br />
}<br />
<br />
return normalizePageNameForShell(window.location.pathname || '');<br />
}<br />
<br />
function isAnecdoteNamespaceForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var canonicalNamespace = String(mw.config.get('wgCanonicalNamespace') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
<br />
return namespaceNumber === 3000 ||<br />
canonicalNamespace === 'anecdote' ||<br />
/^(anecdote|에넥도트):/i.test(pageName);<br />
}<br />
<br />
function isBackendOrSystemPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var action = String(mw.config.get('wgAction') || 'view').toLowerCase();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
var pageName = readCurrentPageNameForShell();<br />
var lowerPageName = pageName.toLowerCase();<br />
<br />
if (action && action !== 'view') {<br />
return true;<br />
}<br />
<br />
if (pageName === '대문') {<br />
return false;<br />
}<br />
<br />
if (SYSTEM_TITLE_NAMESPACES[String(namespaceNumber)]) {<br />
return true;<br />
}<br />
<br />
if (contentModel === 'css' || contentModel === 'javascript' || contentModel === 'json' || contentModel === 'sanitized-css') {<br />
return true;<br />
}<br />
<br />
if (/\.(css|js|json)$/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
if (/^(mediawiki|미디어위키|special|특수):/i.test(pageName)) {<br />
return true;<br />
}<br />
<br />
return false;<br />
}<br />
<br />
function isMediaWikiSystemAssetPageForShell() {<br />
var namespaceNumber = Number(mw.config.get('wgNamespaceNumber'));<br />
var pageName = readCurrentPageNameForShell();<br />
var contentModel = String(mw.config.get('wgPageContentModel') || '').toLowerCase();<br />
<br />
return namespaceNumber === 8 &&<br />
(/\.(css|js)$/i.test(pageName) || contentModel === 'css' || contentModel === 'javascript' || contentModel === 'sanitized-css');<br />
}<br />
<br />
function removeSystemDocIndicatorForShell() {<br />
var existing = document.getElementById('clbi-system-doc-indicator-row');<br />
<br />
if (document.body) {<br />
document.body.classList.remove('clbi-system-doc-page');<br />
}<br />
<br />
if (existing && existing.parentNode) {<br />
existing.parentNode.removeChild(existing);<br />
}<br />
}<br />
<br />
function renderSystemDocIndicatorForShell() {<br />
var pageName;<br />
var extMatch;<br />
var ext;<br />
var row;<br />
var box;<br />
var meta;<br />
var label;<br />
var type;<br />
var title;<br />
var anchor;<br />
var main;<br />
<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (!document.body || !isMediaWikiSystemAssetPageForShell()) return;<br />
<br />
pageName = readCurrentPageNameForShell();<br />
extMatch = pageName.match(/\.(css|js)$/i);<br />
ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
document.body.classList.add('clbi-system-doc-page');<br />
<br />
row = document.createElement('div');<br />
row.id = 'clbi-system-doc-indicator-row';<br />
row.className = 'clbi-system-doc-indicator-row';<br />
<br />
box = document.createElement('div');<br />
box.className = 'clbi-system-doc-indicator';<br />
<br />
meta = document.createElement('div');<br />
meta.className = 'clbi-system-doc-meta';<br />
<br />
label = document.createElement('span');<br />
label.className = 'clbi-system-doc-label';<br />
label.textContent = 'SYSTEM DOCUMENT';<br />
<br />
type = document.createElement('span');<br />
type.className = 'clbi-system-doc-type';<br />
type.textContent = ext;<br />
<br />
title = document.createElement('div');<br />
title.className = 'clbi-system-doc-title';<br />
title.textContent = pageName;<br />
<br />
meta.appendChild(label);<br />
meta.appendChild(type);<br />
box.appendChild(meta);<br />
box.appendChild(title);<br />
row.appendChild(box);<br />
<br />
anchor = document.querySelector('.liberty-content-main .mw-parser-output');<br />
main = document.querySelector('.liberty-content-main');<br />
<br />
if (anchor && anchor.parentNode) {<br />
anchor.parentNode.insertBefore(row, anchor);<br />
} else if (main) {<br />
main.insertBefore(row, main.firstChild);<br />
}<br />
}<br />
<br />
var PAGE_TITLE_TARGET_SELECTORS = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
var pageShellObserverStarted = false;<br />
var pageShellObserverTimer = null;<br />
<br />
function setPageTitleDomHidden(hidden) {<br />
var nodes = document.querySelectorAll(PAGE_TITLE_TARGET_SELECTORS.join(','));<br />
<br />
nodes.forEach(function (node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
}<br />
});<br />
}<br />
<br />
function applyPageShellClasses() {<br />
var body = document.body;<br />
var isSystemPage;<br />
<br />
if (!body) return;<br />
<br />
isSystemPage = isBackendOrSystemPageForShell();<br />
<br />
body.classList.remove('page-title-hidden', 'page-title-visible', 'backend-system-page', 'anecdote-namespace-page', 'clbi-system-doc-page');<br />
removeSystemDocIndicatorForShell();<br />
<br />
if (isAnecdoteNamespaceForShell()) {<br />
body.classList.add('anecdote-namespace-page');<br />
}<br />
<br />
if (isMediaWikiSystemAssetPageForShell()) {<br />
body.classList.add('page-title-hidden', 'backend-system-page', 'clbi-system-doc-page');<br />
setPageTitleDomHidden(true);<br />
renderSystemDocIndicatorForShell();<br />
} else if (isSystemPage) {<br />
body.classList.add('page-title-visible', 'backend-system-page');<br />
setPageTitleDomHidden(false);<br />
} else {<br />
body.classList.add('page-title-hidden');<br />
setPageTitleDomHidden(true);<br />
}<br />
}<br />
<br />
function applyPageShellClassesDeferred() {<br />
applyPageShellClasses();<br />
window.setTimeout(applyPageShellClasses, 0);<br />
window.setTimeout(applyPageShellClasses, 80);<br />
window.setTimeout(applyPageShellClasses, 250);<br />
}<br />
<br />
function startPageShellObserver() {<br />
var observer;<br />
<br />
if (pageShellObserverStarted || !window.MutationObserver || !document.body) return;<br />
<br />
pageShellObserverStarted = true;<br />
observer = new MutationObserver(function () {<br />
if (pageShellObserverTimer) return;<br />
<br />
pageShellObserverTimer = window.setTimeout(function () {<br />
pageShellObserverTimer = null;<br />
applyPageShellClasses();<br />
}, 50);<br />
});<br />
<br />
observer.observe(document.body, {<br />
childList: true,<br />
subtree: true<br />
});<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', function () {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
});<br />
} else {<br />
applyPageShellClassesDeferred();<br />
startPageShellObserver();<br />
}<br />
<br />
if (mw.hook) {<br />
mw.hook('wikipage.content').add(applyPageShellClassesDeferred);<br />
}<br />
<br />
window.CLBI_PAGE_SHELL = {<br />
refresh: applyPageShellClasses,<br />
isBackendOrSystemPage: isBackendOrSystemPageForShell,<br />
isSystemAssetPage: isMediaWikiSystemAssetPageForShell,<br />
renderSystemDocIndicator: renderSystemDocIndicatorForShell,<br />
removeSystemDocIndicator: removeSystemDocIndicatorForShell<br />
};<br />
}());<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상·하단 네비게이션 바 ──<br />
function buildClbiNavHtml(position) {<br />
var isBottom = position === 'bottom';<br />
var base = isBottom ? 'clbi-bottom' : 'clbi-top';<br />
var shortBase = isBottom ? 'clbi-bnav' : 'clbi-tnav';<br />
var wrapId = base + '-nav-wrap';<br />
var navId = base + '-nav';<br />
var mainId = base + '-nav-main';<br />
var tabsId = base + '-nav-tabs';<br />
var searchId = base + '-nav-search';<br />
var inputId = isBottom ? 'clbi-bottom-search-input' : 'clbi-top-search-input';<br />
var rightId = base + '-nav-right';<br />
var worldId = shortBase + '-worldbuilding';<br />
var infoId = shortBase + '-info';<br />
var subId = isBottom ? 'clbi-bottom-sub-worldbuilding' : 'clbi-sub-worldbuilding';<br />
var subInnerId = subId + '-inner';<br />
<br />
return '' +<br />
'<div id="' + wrapId + '">' +<br />
'<div id="' + navId + '">' +<br />
'<div id="' + mainId + '">' +<br />
'<div id="' + tabsId + '">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="' + worldId + '">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + searchId + '">' +<br />
'<input type="text" id="' + inputId + '" placeholder="검색...">' +<br />
'</div>' +<br />
'<div id="' + rightId + '">' +<br />
'<div class="clbi-top-nav-item" id="' + infoId + '">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="' + subId + '">' +<br />
'<div id="' + subInnerId + '">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
var $contentWrapper = $('.content-wrapper').first();<br />
<br />
if ($contentWrapper.length) {<br />
$('#clbi-top-nav-wrap, #clbi-bottom-nav-wrap').remove();<br />
$contentWrapper.before(buildClbiNavHtml('top'));<br />
$contentWrapper.after(buildClbiNavHtml('bottom'));<br />
}<br />
<br />
function updateClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var root = document.documentElement;<br />
var topH = 0;<br />
var bottomH = 0;<br />
<br />
if (!root) return;<br />
<br />
if (top) {<br />
topH = Math.ceil(top.getBoundingClientRect().height || top.offsetHeight || 0);<br />
}<br />
<br />
if (bottom) {<br />
bottomH = Math.ceil(bottom.getBoundingClientRect().height || bottom.offsetHeight || 0);<br />
}<br />
<br />
root.style.setProperty('--clbi-top-nav-outer-h', topH + 'px');<br />
root.style.setProperty('--clbi-bottom-nav-outer-h', bottomH + 'px');<br />
}<br />
<br />
function scheduleClbiShellMetrics() {<br />
updateClbiShellMetrics();<br />
window.setTimeout(updateClbiShellMetrics, 0);<br />
window.setTimeout(updateClbiShellMetrics, 80);<br />
window.setTimeout(updateClbiShellMetrics, 240);<br />
}<br />
<br />
function watchClbiShellMetrics() {<br />
var top = document.getElementById('clbi-top-nav-wrap');<br />
var bottom = document.getElementById('clbi-bottom-nav-wrap');<br />
var observer;<br />
<br />
scheduleClbiShellMetrics();<br />
<br />
$(window).on('resize orientationchange', scheduleClbiShellMetrics);<br />
<br />
if (window.ResizeObserver) {<br />
observer = new ResizeObserver(scheduleClbiShellMetrics);<br />
if (top) observer.observe(top);<br />
if (bottom) observer.observe(bottom);<br />
window.CLBI_SHELL_RESIZE_OBSERVER = observer;<br />
}<br />
}<br />
<br />
function bindClbiWorldbuildingToggle(buttonSelector, menuSelector) {<br />
$(buttonSelector).on('click', function() {<br />
var $menu = $(menuSelector);<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
scheduleClbiShellMetrics();<br />
});<br />
}<br />
<br />
bindClbiWorldbuildingToggle('#clbi-tnav-worldbuilding', '#clbi-sub-worldbuilding');<br />
bindClbiWorldbuildingToggle('#clbi-bnav-worldbuilding', '#clbi-bottom-sub-worldbuilding');<br />
<br />
$('#clbi-top-search-input, #clbi-bottom-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
watchClbiShellMetrics();<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
<br />
function setNativePageTitleHiddenHard(hidden) {<br />
var selectors = [<br />
'.liberty-content-header',<br />
'.liberty-content-header .title',<br />
'.liberty-content-header .title h1',<br />
'.liberty-content-header h1',<br />
'#firstHeading',<br />
'.firstHeading',<br />
'.mw-first-heading',<br />
'.page-heading',<br />
'.page-header',<br />
'.mw-page-title-main',<br />
'.mw-page-title-namespace',<br />
'.mw-page-title-separator'<br />
];<br />
<br />
document.querySelectorAll(selectors.join(',')).forEach(function(node) {<br />
if (!node || !node.style) return;<br />
<br />
if (hidden) {<br />
node.setAttribute('data-clbi-title-hidden', 'true');<br />
node.style.setProperty('display', 'none', 'important');<br />
node.style.setProperty('visibility', 'hidden', 'important');<br />
node.style.setProperty('height', '0', 'important');<br />
node.style.setProperty('min-height', '0', 'important');<br />
node.style.setProperty('margin', '0', 'important');<br />
node.style.setProperty('padding', '0', 'important');<br />
node.style.setProperty('overflow', 'hidden', 'important');<br />
} else if (node.getAttribute('data-clbi-title-hidden') === 'true') {<br />
node.removeAttribute('data-clbi-title-hidden');<br />
node.style.removeProperty('display');<br />
node.style.removeProperty('visibility');<br />
node.style.removeProperty('height');<br />
node.style.removeProperty('min-height');<br />
node.style.removeProperty('margin');<br />
node.style.removeProperty('padding');<br />
node.style.removeProperty('overflow');<br />
}<br />
});<br />
}<br />
<br />
function applyDefaultPageTitleVisibility() {<br />
var hideTitle = true;<br />
var isSystemAssetPage = false;<br />
<br />
if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isSystemAssetPage === 'function') {<br />
isSystemAssetPage = window.CLBI_PAGE_SHELL.isSystemAssetPage();<br />
}<br />
<br />
if (isSystemAssetPage) {<br />
hideTitle = true;<br />
} else if (window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.isBackendOrSystemPage === 'function') {<br />
hideTitle = !window.CLBI_PAGE_SHELL.isBackendOrSystemPage();<br />
}<br />
<br />
$('body')<br />
.toggleClass('page-title-hidden', hideTitle)<br />
.toggleClass('page-title-visible', !hideTitle)<br />
.toggleClass('clbi-system-doc-page', isSystemAssetPage);<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
if (isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.renderSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.renderSystemDocIndicator();<br />
} else if (!isSystemAssetPage && window.CLBI_PAGE_SHELL && typeof window.CLBI_PAGE_SHELL.removeSystemDocIndicator === 'function') {<br />
window.CLBI_PAGE_SHELL.removeSystemDocIndicator();<br />
}<br />
<br />
if (hideTitle) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', 'none');<br />
setNativePageTitleHiddenHard(true);<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('#firstHeading, .firstHeading, .mw-first-heading, .page-heading, .page-header').css('display', '');<br />
setNativePageTitleHiddenHard(false);<br />
}<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var hideTools = (isMainPage || isUserProfilePage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
$('body').toggleClass('clbi-main-page', isMainPage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
setNativePageTitleHiddenHard(true);<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
initCategoryNavIfAvailable(document);<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
<br />
applyDefaultPageTitleVisibility();<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2438
미디어위키:Layout.css
2026-06-01T20:46:27Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
--layout-gap-double:16px;<br />
--clbi-top-nav-outer-h:47px;<br />
--clbi-bottom-nav-outer-h:47px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
height:100%;<br />
overflow-x:auto;<br />
overflow-y:hidden;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
height:100vh !important;<br />
overflow-x:visible !important;<br />
overflow-y:hidden !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
#clbi-bottom-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
#clbi-bottom-nav-wrap {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 var(--layout-gap) !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:stretch !important;<br />
justify-content:stretch !important;<br />
height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
min-height:0 !important;<br />
max-height:calc(100vh - var(--clbi-top-nav-outer-h, 47px) - var(--clbi-bottom-nav-outer-h, 47px) - var(--layout-gap-double, 16px)) !important;<br />
overflow:visible !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
/*<br />
Liberty/Bootstrap의 중앙 content 래퍼는 grid 행 안에서 height:100%를 잡아도<br />
실제 wrapper 높이보다 14px 짧게 계산된다. 이 14px은 화면에 보이는<br />
본문 컨테이너 하단 ↔ 하단 네비 사이의 추가 빈공간으로 나타난다.<br />
좌우 사이드바나 외부 셸을 건드리지 않고 중앙 래퍼만 보정한다.<br />
*/<br />
height:calc(100% + 14px) !important;<br />
max-height:calc(100% + 14px) !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
min-height:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
/*<br />
본문 컨테이너는 바깥 장비 프레임과 내부 우물로 분리한다.<br />
- .liberty-content는 투명 래퍼로 유지한다.<br />
- .liberty-content-main은 외곽 프레임이다.<br />
- .mw-parser-output은 실제 본문이 놓이는 내부 우물이다.<br />
- 외곽과 본문 사이의 기본 간격은 8px이다.<br />
*/<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content-main {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
height:100% !important;<br />
min-height:0 !important;<br />
background:#1d1d1d !important;<br />
border:1px solid #050505 !important;<br />
border-radius:0 !important;<br />
padding:8px !important;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34) !important;<br />
overflow:hidden !important;<br />
display:flex !important;<br />
flex-direction:column !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
position:relative !important;<br />
box-sizing:border-box !important;<br />
flex:1 1 auto !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:8px !important;<br />
background:#080808 !important;<br />
border:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555 !important;<br />
overflow-y:auto !important;<br />
overflow-x:hidden !important;<br />
}<br />
<br />
<br />
.liberty-content-main .mw-parser-output,<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
scrollbar-width:thin;<br />
scrollbar-color:#333333 #080808;<br />
}<br />
<br />
/* 제목이 유지되는 관리/시스템 문서는 제목 영역과 본문 우물 사이에 8px 간격을 둔다. */<br />
body.page-title-visible .liberty-content-header + .mw-parser-output,<br />
body.backend-system-page .liberty-content-header + .mw-parser-output {<br />
margin-top:8px !important;<br />
}<br />
<br />
/* title을 숨긴 일반 문서는 내부 우물이 바로 본문 시작점이 된다. */<br />
body.page-title-hidden .liberty-content-header + .mw-parser-output,<br />
body.anecdote-namespace-page .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
display:none !important;<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
/* 일반 문서에서는 기본 제목 영역을 숨긴다.<br />
CSS/JS/JSON, MediaWiki, 특수문서, 틀, 파일, 분류 같은 시스템 문서는<br />
Common.js가 body.backend-system-page를 부여하므로 제목을 유지한다. */<br />
body.page-title-hidden .liberty-content-header,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header .title h1 {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.page-title-hidden .mw-page-title-main,<br />
body.page-title-hidden .mw-page-title-main::after,<br />
body.page-title-hidden .mw-page-title-namespace,<br />
body.page-title-hidden .mw-page-title-namespace::after,<br />
body.page-title-hidden .mw-page-title-separator,<br />
body.page-title-hidden .mw-page-title-separator::after,<br />
body.page-title-hidden .liberty-content-header .title,<br />
body.page-title-hidden .liberty-content-header h1,<br />
body.page-title-hidden #firstHeading,<br />
body.page-title-hidden .firstHeading,<br />
body.page-title-hidden .mw-first-heading,<br />
body.page-title-hidden .page-heading,<br />
body.page-title-hidden .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* Anecdote 네임스페이스도 작품/회차 일반 문서 계열로 본다.<br />
감상 모드 여부와 관계없이 MediaWiki 기본 제목은 숨기고,<br />
뷰어 내부 제목과 작품 허브 내부 제목만 사용한다. */<br />
body.anecdote-namespace-page .liberty-content-header,<br />
body.anecdote-namespace-page .liberty-content-header .title,<br />
body.anecdote-namespace-page .liberty-content-header .title h1,<br />
body.anecdote-namespace-page .mw-page-title-main,<br />
body.anecdote-namespace-page .mw-page-title-main::after,<br />
body.anecdote-namespace-page .mw-page-title-namespace,<br />
body.anecdote-namespace-page .mw-page-title-namespace::after,<br />
body.anecdote-namespace-page .mw-page-title-separator,<br />
body.anecdote-namespace-page .mw-page-title-separator::after,<br />
body.anecdote-namespace-page #firstHeading,<br />
body.anecdote-namespace-page .firstHeading,<br />
body.anecdote-namespace-page .mw-first-heading,<br />
body.anecdote-namespace-page .page-heading,<br />
body.anecdote-namespace-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
<br />
/* action-view fallback: 일반 열람 문서는 JS 재적용 타이밍과 무관하게 기본 제목을 숨긴다.<br />
backend/system 문서는 Common.js가 body.backend-system-page를 붙여 제목을 유지한다. */<br />
body.action-view:not(.backend-system-page) .liberty-content-header,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title,<br />
body.action-view:not(.backend-system-page) .liberty-content-header .title h1,<br />
body.action-view:not(.backend-system-page) .liberty-content-header h1,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main,<br />
body.action-view:not(.backend-system-page) .mw-page-title-main::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace,<br />
body.action-view:not(.backend-system-page) .mw-page-title-namespace::after,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator,<br />
body.action-view:not(.backend-system-page) .mw-page-title-separator::after,<br />
body.action-view:not(.backend-system-page) #firstHeading,<br />
body.action-view:not(.backend-system-page) .firstHeading,<br />
body.action-view:not(.backend-system-page) .mw-first-heading,<br />
body.action-view:not(.backend-system-page) .page-heading,<br />
body.action-view:not(.backend-system-page) .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view:not(.backend-system-page) .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
<br />
/* 대문 title hard fallback<br />
Theme.css가 뒤에서 .mw-page-title-main을 다시 보이게 하더라도<br />
대문 열람 화면에서는 MediaWiki 기본 제목을 강제로 숨긴다. */<br />
body.action-view.page-대문 .liberty-content-header,<br />
body.action-view.page-대문 .liberty-content-header .title,<br />
body.action-view.page-대문 .liberty-content-header .title h1,<br />
body.action-view.page-대문 .liberty-content-header h1,<br />
body.action-view.page-대문 .mw-page-title-main,<br />
body.action-view.page-대문 .mw-page-title-main::after,<br />
body.action-view.page-대문 .mw-page-title-namespace,<br />
body.action-view.page-대문 .mw-page-title-namespace::after,<br />
body.action-view.page-대문 .mw-page-title-separator,<br />
body.action-view.page-대문 .mw-page-title-separator::after,<br />
body.action-view.page-대문 #firstHeading,<br />
body.action-view.page-대문 .firstHeading,<br />
body.action-view.page-대문 .mw-first-heading,<br />
body.action-view.page-대문 .page-heading,<br />
body.action-view.page-대문 .page-header,<br />
body.action-view.rootpage-대문 .liberty-content-header,<br />
body.action-view.rootpage-대문 .liberty-content-header .title,<br />
body.action-view.rootpage-대문 .liberty-content-header .title h1,<br />
body.action-view.rootpage-대문 .liberty-content-header h1,<br />
body.action-view.rootpage-대문 .mw-page-title-main,<br />
body.action-view.rootpage-대문 .mw-page-title-main::after,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace,<br />
body.action-view.rootpage-대문 .mw-page-title-namespace::after,<br />
body.action-view.rootpage-대문 .mw-page-title-separator,<br />
body.action-view.rootpage-대문 .mw-page-title-separator::after,<br />
body.action-view.rootpage-대문 #firstHeading,<br />
body.action-view.rootpage-대문 .firstHeading,<br />
body.action-view.rootpage-대문 .mw-first-heading,<br />
body.action-view.rootpage-대문 .page-heading,<br />
body.action-view.rootpage-대문 .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
body.action-view.page-대문 .liberty-content-header + .mw-parser-output,<br />
body.action-view.rootpage-대문 .liberty-content-header + .mw-parser-output {<br />
margin-top:0 !important;<br />
}<br />
<br />
/* 문서 조작 버튼은 DevTools의 DOCUMENT TOOLS로 이동한다. */<br />
.liberty-content-header .content-tools,<br />
.content-tools {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-B. MediaWiki CSS/JS 문서 인디케이터<br />
----------------------------------------- */<br />
<br />
.clbi-system-doc-indicator-row {<br />
margin:0 0 8px 0;<br />
padding:0;<br />
display:flex;<br />
justify-content:flex-end;<br />
align-items:flex-start;<br />
flex:0 0 auto;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
min-width:320px;<br />
max-width:min(56%, 860px);<br />
padding:10px 14px 12px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid !important;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
inset 1px 0 0 rgba(255,255,255,0.012),<br />
inset -1px 0 0 rgba(0,0,0,0.38) !important;<br />
background-image:linear-gradient(to bottom, rgba(255,255,255,0.020), rgba(0,0,0,0.08));<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex;<br />
justify-content:flex-end;<br />
align-items:center;<br />
gap:8px;<br />
margin:0 0 6px 0;<br />
font-size:11px;<br />
line-height:1;<br />
letter-spacing:0.08em;<br />
text-transform:uppercase;<br />
color:#8a8a8a;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex;<br />
align-items:center;<br />
height:16px;<br />
padding:0 6px;<br />
background:#0d0d0d;<br />
border:1px solid #202020;<br />
color:#c8c8c8;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block;<br />
text-align:right;<br />
font-size:34px;<br />
line-height:1;<br />
font-weight:900;<br />
letter-spacing:0.01em;<br />
color:#e2e2e2;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78);<br />
word-break:break-word;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .liberty-content-header .title,<br />
body.clbi-system-doc-page .liberty-content-header .title h1,<br />
body.clbi-system-doc-page .liberty-content-header h1,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-namespace::after,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page .mw-page-title-separator::after,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading,<br />
body.clbi-system-doc-page .page-heading,<br />
body.clbi-system-doc-page .page-header {<br />
display:none !important;<br />
visibility:hidden !important;<br />
height:0 !important;<br />
min-height:0 !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
max-height:100%;<br />
overflow-y:auto;<br />
overflow-x:hidden;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav,<br />
#clbi-bottom-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main,<br />
#clbi-bottom-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo,<br />
#clbi-bottom-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img,<br />
#clbi-bottom-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs,<br />
#clbi-bottom-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search,<br />
#clbi-bottom-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input,<br />
#clbi-bottom-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus,<br />
#clbi-bottom-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right,<br />
#clbi-bottom-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
18-1. 대문 전용 상·하단 네비 최소화<br />
----------------------------------------- */<br />
<br />
/*<br />
대문에서는 본문 내부에 카테고리 네비와 대문 전용 조작 구조가 이미 있으므로,<br />
상단·하단 네비바는 검색 슬롯만 남긴다.<br />
다른 문서에서는 기존 버튼 구성을 그대로 유지한다.<br />
*/<br />
<br />
body.clbi-main-page #clbi-top-nav-tabs,<br />
body.page-대문 #clbi-top-nav-tabs,<br />
body.clbi-main-page #clbi-bottom-nav-tabs,<br />
body.page-대문 #clbi-bottom-nav-tabs,<br />
body.clbi-main-page #clbi-top-nav-right,<br />
body.page-대문 #clbi-top-nav-right,<br />
body.clbi-main-page #clbi-bottom-nav-right,<br />
body.page-대문 #clbi-bottom-nav-right,<br />
body.clbi-main-page #clbi-sub-worldbuilding,<br />
body.page-대문 #clbi-sub-worldbuilding,<br />
body.clbi-main-page #clbi-bottom-sub-worldbuilding,<br />
body.page-대문 #clbi-bottom-sub-worldbuilding {<br />
display:none !important;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input,<br />
body.page-대문 #clbi-top-search-input,<br />
body.clbi-main-page #clbi-bottom-search-input,<br />
body.page-대문 #clbi-bottom-search-input {<br />
width:288px;<br />
}<br />
<br />
body.clbi-main-page #clbi-top-search-input:focus,<br />
body.page-대문 #clbi-top-search-input:focus,<br />
body.clbi-main-page #clbi-bottom-search-input:focus,<br />
body.page-대문 #clbi-bottom-search-input:focus {<br />
width:384px;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding,<br />
#clbi-bottom-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open,<br />
#clbi-bottom-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner,<br />
#clbi-bottom-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-bottom-nav .clbi-top-nav-item,<br />
#clbi-bottom-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-bottom-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Common.js&diff=2437
미디어위키:Common.js
2026-06-01T20:36:18Z
<p>Nxdsxn: </p>
<hr />
<div>mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js');<br />
mw.loader.load('/index.php?title=MediaWiki:DevTools.js&action=raw&ctype=text/javascript');<br />
mw.loader.load('/index.php?title=MediaWiki:CategoryNav.js&action=raw&ctype=text/javascript');<br />
<br />
function loadLangScript(done) {<br />
$.getScript('/index.php?title=미디어위키:Lang.js&action=raw&ctype=text/javascript')<br />
.done(function() {<br />
if (typeof done === 'function') done();<br />
})<br />
.fail(function(a, b, c) {<br />
console.error('Lang.js load failed:', b, c);<br />
if (typeof done === 'function') done();<br />
});<br />
}<br />
<br />
<br />
function initHalftoneBackground() {<br />
try {<br />
initWebGLHalftoneBackground();<br />
} catch (err) {<br />
console.error('WebGL halftone background failed:', err);<br />
}<br />
}<br />
<br />
function initWebGLHalftoneBackground() {<br />
var canvasId = 'site-halftone-bg';<br />
var existing = document.getElementById(canvasId);<br />
var canvas = existing || document.createElement('canvas');<br />
<br />
if (!existing) {<br />
canvas.id = canvasId;<br />
canvas.setAttribute('aria-hidden', 'true');<br />
document.body.insertBefore(canvas, document.body.firstChild || null);<br />
}<br />
<br />
canvas.style.position = 'fixed';<br />
canvas.style.inset = '0';<br />
canvas.style.width = '100vw';<br />
canvas.style.height = '100vh';<br />
canvas.style.pointerEvents = 'none';<br />
canvas.style.background = '#000000';<br />
<br />
var gl = canvas.getContext('webgl', {<br />
alpha: false,<br />
antialias: false,<br />
depth: false,<br />
stencil: false,<br />
preserveDrawingBuffer: false,<br />
powerPreference: 'high-performance'<br />
}) || canvas.getContext('experimental-webgl');<br />
<br />
if (!gl) {<br />
console.warn('WebGL background unavailable.');<br />
return;<br />
}<br />
<br />
var vertexSrc = [<br />
'attribute vec2 a_position;',<br />
'void main() {',<br />
' gl_Position = vec4(a_position, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var fragmentSrc = [<br />
'precision mediump float;',<br />
'uniform vec2 u_resolution;',<br />
'uniform float u_time;',<br />
'const float TAU = 6.28318530718;',<br />
'float gaussian(float v, float r) {',<br />
' return exp(-((v * v) / max(0.0001, r * r)));',<br />
'}',<br />
'float hash(vec2 p) {',<br />
' return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',<br />
'}',<br />
'float bucketAlpha(float a) {',<br />
' float i = floor(a * 9.0);',<br />
' if (i < 1.0) return 0.040;',<br />
' if (i < 2.0) return 0.080;',<br />
' if (i < 3.0) return 0.135;',<br />
' if (i < 4.0) return 0.210;',<br />
' if (i < 5.0) return 0.310;',<br />
' if (i < 6.0) return 0.430;',<br />
' if (i < 7.0) return 0.580;',<br />
' if (i < 8.0) return 0.760;',<br />
' return 0.920;',<br />
'}',<br />
'void main() {',<br />
' vec2 frag = gl_FragCoord.xy;',<br />
' float spacing = 5.0;',<br />
' float dotSize = 1.08;',<br />
' vec2 grid = floor(frag / spacing);',<br />
' vec2 inCell = mod(frag, spacing);',<br />
' vec2 dotOrigin = vec2(1.0, 1.0);',<br />
' vec2 dotCenter = dotOrigin + vec2(dotSize * 0.5);',<br />
' vec2 local = abs(inCell - dotCenter);',<br />
' float noise = hash(grid);',<br />
' float size = dotSize + noise * 0.18;',<br />
' float dotMask = 1.0 - smoothstep(size * 0.5, size * 0.5 + 0.22, max(local.x, local.y));',<br />
' vec2 uv = frag / u_resolution;',<br />
' float centerLine = 0.50 +',<br />
' sin((uv.y * 1.32 + 0.08) * TAU) * 0.070 +',<br />
' sin((uv.y * 3.18 + 0.34) * TAU) * 0.030;',<br />
' float u = uv.x - centerLine;',<br />
' float absU = abs(u);',<br />
' float sideLift = smoothstep(0.065, 0.44, absU);',<br />
' float valley = gaussian(u, 0.150);',<br />
' float t = u_time;',<br />
' float leftRibbonCenter = -0.28 + sin((uv.y * 3.20 + 0.12) * TAU) * 0.050;',<br />
' float rightRibbonCenter = 0.27 + sin((uv.y * 2.85 + 0.56) * TAU) * 0.055;',<br />
' float leftRibbon = gaussian(u - leftRibbonCenter, 0.105);',<br />
' float rightRibbon = gaussian(u - rightRibbonCenter, 0.110);',<br />
' float foldedU = u +',<br />
' sin((uv.y * 4.40 + 0.22) * TAU) * 0.050 * (0.3 + sideLift) +',<br />
' sin((uv.y * 7.20 + uv.x * 1.10) * TAU) * 0.022;',<br />
' float verticalFold = pow(0.5 + 0.5 * cos(((foldedU * 3.05) + (sin(uv.y * TAU * 2.35) * 0.18)) * TAU), 2.5);',<br />
' float diagonalFold = pow(0.5 + 0.5 * cos(((foldedU * 1.80) - (uv.y * 1.12) + 0.18) * TAU), 2.1);',<br />
' float waist = gaussian(uv.y - 0.50, 0.25) * gaussian(absU - 0.20, 0.19);',<br />
' float grain = (noise - 0.5) * 0.050;',<br />
' float staticField =',<br />
' 0.055 +',<br />
' sideLift * 0.210 +',<br />
' (leftRibbon + rightRibbon) * 0.145 +',<br />
' verticalFold * (0.055 + sideLift * 0.115) +',<br />
' diagonalFold * 0.045 +',<br />
' waist * 0.060 -',<br />
' valley * 0.150 +',<br />
' grain;',<br />
' float alpha = staticField;',<br />
' alpha += 0.115 * (leftRibbon + rightRibbon) * sin(t * 0.00030 + ((uv.y * 1.9) + sideLift * 0.4) * TAU);',<br />
' alpha += 0.095 * verticalFold * (0.4 + sideLift) * sin(t * 0.00041 + ((uv.y * 2.7) + foldedU * 0.65) * TAU);',<br />
' alpha += 0.070 * waist * sin(t * 0.00053 + ((uv.y * 3.1) - absU * 0.8) * TAU);',<br />
' alpha += 0.060 * (1.0 - valley) * diagonalFold * sin(t * 0.00067 + ((uv.y * 1.4) + uv.x * 0.6) * TAU);',<br />
' alpha += 0.038 * (0.35 + sideLift) * (0.35 + noise) * sin(t * 0.00079 + ((uv.y * 4.6) + noise * 0.8) * TAU);',<br />
' alpha = bucketAlpha(clamp(alpha, 0.025, 0.96));',<br />
' float value = alpha * dotMask;',<br />
' gl_FragColor = vec4(vec3(0.8862745 * value), 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function compileShader(type, source) {<br />
var shader = gl.createShader(type);<br />
gl.shaderSource(shader, source);<br />
gl.compileShader(shader);<br />
<br />
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {<br />
console.error('WebGL shader compile error:', gl.getShaderInfoLog(shader));<br />
gl.deleteShader(shader);<br />
return null;<br />
}<br />
<br />
return shader;<br />
}<br />
<br />
var vertexShader = compileShader(gl.VERTEX_SHADER, vertexSrc);<br />
var fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentSrc);<br />
<br />
if (!vertexShader || !fragmentShader) return;<br />
<br />
var program = gl.createProgram();<br />
gl.attachShader(program, vertexShader);<br />
gl.attachShader(program, fragmentShader);<br />
gl.linkProgram(program);<br />
<br />
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {<br />
console.error('WebGL program link error:', gl.getProgramInfoLog(program));<br />
return;<br />
}<br />
<br />
var positionLoc = gl.getAttribLocation(program, 'a_position');<br />
var resolutionLoc = gl.getUniformLocation(program, 'u_resolution');<br />
var timeLoc = gl.getUniformLocation(program, 'u_time');<br />
<br />
var buffer = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([<br />
-1, -1,<br />
1, -1,<br />
-1, 1,<br />
-1, 1,<br />
1, -1,<br />
1, 1<br />
]), gl.STATIC_DRAW);<br />
<br />
gl.useProgram(program);<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);<br />
gl.enableVertexAttribArray(positionLoc);<br />
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);<br />
<br />
function resize() {<br />
var dpr = Math.min(window.devicePixelRatio || 1, 1.5);<br />
var cssW = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);<br />
var cssH = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);<br />
var w = Math.max(1, Math.floor(cssW * dpr));<br />
var h = Math.max(1, Math.floor(cssH * dpr));<br />
<br />
if (canvas.width !== w || canvas.height !== h) {<br />
canvas.width = w;<br />
canvas.height = h;<br />
canvas.style.width = cssW + 'px';<br />
canvas.style.height = cssH + 'px';<br />
gl.viewport(0, 0, w, h);<br />
}<br />
}<br />
<br />
var prefersReducedMotion = false;<br />
try {<br />
prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br />
} catch (err) {}<br />
<br />
var lastFrame = 0;<br />
var frameInterval = prefersReducedMotion ? 1000 : 66;<br />
var startTime = performance.now();<br />
<br />
function render(now) {<br />
requestAnimationFrame(render);<br />
if (document.hidden) return;<br />
if (now - lastFrame < frameInterval) return;<br />
<br />
lastFrame = now;<br />
resize();<br />
<br />
gl.clearColor(0, 0, 0, 1);<br />
gl.clear(gl.COLOR_BUFFER_BIT);<br />
gl.uniform2f(resolutionLoc, canvas.width, canvas.height);<br />
gl.uniform1f(timeLoc, now - startTime);<br />
gl.drawArrays(gl.TRIANGLES, 0, 6);<br />
}<br />
<br />
resize();<br />
requestAnimationFrame(render);<br />
}<br />
<br />
var CLBI_SVG_BELL = '<svg class="profile-svg profile-svg-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>';<br />
var CLBI_SVG_BELL_DOT = '<svg class="profile-svg profile-svg-bell-dot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348"/><circle cx="18" cy="5" r="3"/></svg>';<br />
var CLBI_SVG_LIST = '<svg class="profile-svg profile-svg-list" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>';<br />
var CLBI_SVG_LANGUAGES = '<svg class="profile-svg profile-svg-languages" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';<br />
var CLBI_SVG_POWER = '<svg class="profile-svg profile-svg-power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>';<br />
var CLBI_SVG_SETTINGS = '<svg class="profile-svg profile-svg-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>';<br />
var CLBI_SVG_SCAN_TEXT = '<svg class="profile-svg profile-svg-scan-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8h8"/><path d="M7 12h10"/><path d="M7 16h6"/></svg>';<br />
var CLBI_SVG_SCAN_EYE = '<svg class="profile-svg profile-svg-scan-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>';<br />
var CLBI_SVG_NEWSPAPER = '<svg class="profile-svg profile-svg-newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18h-5"/><path d="M18 14h-8"/><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="10" y="6" rx="1"/></svg>';<br />
var CLBI_SVG_TROPHY = '<svg class="profile-svg profile-svg-trophy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/><path d="M18 9h1.5a1 1 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/><path d="M6 9H4.5a1 1 0 0 1 0-5H6"/></svg>';<br />
var CLBI_SVG_PACKAGE = '<svg class="profile-svg profile-svg-package" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v6"/><path d="M16.76 3a2 2 0 0 1 1.8 1.1l2.23 4.479a2 2 0 0 1 .21.891V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.472a2 2 0 0 1 .211-.894L5.45 4.1A2 2 0 0 1 7.24 3z"/><path d="M3.054 9.013h17.893"/></svg>';<br />
<br />
var PROFILE_RENDER_TOKEN = 0;<br />
<br />
function invalidateProfileRender() {<br />
PROFILE_RENDER_TOKEN++;<br />
}<br />
<br />
$(function() {<br />
initHalftoneBackground();<br />
<br />
// ── 상단 네비게이션 바 ──<br />
var navHtml =<br />
'<div id="clbi-top-nav-wrap">' +<br />
'<div id="clbi-top-nav">' +<br />
<br />
'<div id="clbi-top-nav-main">' +<br />
<br />
'<div id="clbi-top-nav-tabs">' +<br />
'<a class="clbi-top-nav-item" href="/index.php/대문">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-main-menu-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">메인 메뉴</span>' +<br />
'</a>' +<br />
'<a class="clbi-top-nav-item" href="/index.php/프로젝트:소개">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-project-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">프로젝트</span>' +<br />
'</a>' +<br />
'<div class="clbi-top-nav-item" id="clbi-tnav-worldbuilding">' +<br />
'<img class="clbi-tnav-icon" src="/index.php?title=특수:Redirect/file/Ic-worldbuilding-001.png" alt="">' +<br />
'<span class="clbi-tnav-label">세계관</span>' +<br />
'<span class="clbi-tnav-arrow">▾</span>' +<br />
'</div>' +<br />
'</div>' +<br />
<br />
'<div id="clbi-top-nav-search">' +<br />
'<input type="text" id="clbi-top-search-input" placeholder="검색...">' +<br />
'</div>' +<br />
<br />
'<div id="clbi-top-nav-right">' +<br />
'<div class="clbi-top-nav-item" id="clbi-tnav-info">' +<br />
'<span class="clbi-tnav-label">ℹ</span>' +<br />
'</div>' +<br />
'</div>' +<br />
<br />
'</div>' +<br />
<br />
'<div id="clbi-sub-worldbuilding">' +<br />
'<div id="clbi-sub-worldbuilding-inner">' +<br />
'<div class="clbi-tnav-sub-list">' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/역사적_사건">역사적 사건</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/설정">설정</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/국가_및_조합">국가 및 조합</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/기업_및_공동체">기업 및 공동체</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/군_정치집단">군, 정치집단</a>' +<br />
'<a class="clbi-tnav-sub-item" href="/index.php/인물">인물</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').before(navHtml);<br />
<br />
$('#clbi-tnav-worldbuilding').on('click', function() {<br />
var $menu = $('#clbi-sub-worldbuilding');<br />
var $btn = $(this);<br />
<br />
$menu.toggleClass('worldbuilding-open');<br />
$btn.toggleClass('clbi-tnav-active', $menu.hasClass('worldbuilding-open'));<br />
});<br />
<br />
$('#clbi-top-search-input').on('keydown', function(e) {<br />
if (e.key === 'Enter') {<br />
var q = $(this).val().trim();<br />
if (q) window.location.href = '/index.php?search=' + encodeURIComponent(q);<br />
}<br />
});<br />
<br />
});<br />
<br />
// 페이지 전환 사운드<br />
var transitionSound = new Audio('/index.php?title=특수:Redirect/file/Sfx-ui-001.mp3');<br />
<br />
(function() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
transitionSound.volume = sfxOn ? master * sfx : 0;<br />
})();<br />
<br />
function playStaticSound() {<br />
var master = parseFloat(localStorage.getItem('clbi-audio-master') || 80) / 100;<br />
var sfx = parseFloat(localStorage.getItem('clbi-audio-sfx') || 60) / 100;<br />
var sfxOn = localStorage.getItem('clbi-audio-sfxOn') !== 'false';<br />
<br />
if (!sfxOn) return;<br />
<br />
transitionSound.volume = master * sfx;<br />
transitionSound.currentTime = 0;<br />
transitionSound.play();<br />
}<br />
<br />
// 현재 언어 감지<br />
function getCurrentLang() {<br />
var langData = document.getElementById('clbi-lang-data');<br />
return langData ? (langData.getAttribute('data-lang') || 'ko') : 'ko';<br />
}<br />
<br />
function normalizePageName(value) {<br />
return String(value || '')<br />
.split('?')[0]<br />
.replace(/^\/index\.php\//, '')<br />
.replace(/_/g, ' ')<br />
.trim();<br />
}<br />
<br />
function buildWikiPath(title) {<br />
return '/index.php/' + encodeURI(String(title || '').replace(/ /g, '_'));<br />
}<br />
<br />
function getLangShortCode(lang) {<br />
var map = { ko: 'KR', en: 'EN', zh: 'ZH', ja: 'JA', ru: 'RU', es: 'ES' };<br />
return map[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getLanguageTargetTitle(lang) {<br />
var data = document.getElementById('clbi-lang-data');<br />
if (!data || !lang) return '';<br />
<br />
var keys = [<br />
'data-' + lang,<br />
'data-page-' + lang,<br />
'data-title-' + lang,<br />
'data-target-' + lang,<br />
'data-lang-' + lang<br />
];<br />
<br />
for (var i = 0; i < keys.length; i++) {<br />
var value = data.getAttribute(keys[i]);<br />
if (value) return value;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
<br />
var SIDEBAR_LANG_SVG_NS = 'http://www.w3.org/2000/svg';<br />
var SIDEBAR_LANGUAGE_STATUS_TITLE = 'MediaWiki:LanguageStatus.json';<br />
var SIDEBAR_LANGUAGE_LABELS = {<br />
ko: '한국어',<br />
en: 'English',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'Русский',<br />
es: 'Español'<br />
};<br />
var SIDEBAR_LANGUAGE_DIAL_LABELS = {<br />
ko: '한국어',<br />
en: 'ENG',<br />
zh: '中文',<br />
ja: '日本語',<br />
ru: 'РУС',<br />
es: 'ESP'<br />
};<br />
var SIDEBAR_LANGUAGE_STATUS_VALUES = {<br />
available: true,<br />
wip: true,<br />
unavailable: true<br />
};<br />
<br />
var sidebarLanguageStatusRegistry = {};<br />
var sidebarLanguageStatusLoaded = false;<br />
var sidebarLanguageStatusLoading = false;<br />
var sidebarLanguageStatusCallbacks = [];<br />
<br />
var sidebarLanguageState = {<br />
order: ['ko', 'en', 'zh', 'ja', 'ru', 'es'],<br />
currentLang: 'ko',<br />
baseIndex: 0,<br />
selectedIndex: 0,<br />
rotation: 0,<br />
dragging: false,<br />
dragMoved: false,<br />
dragStartX: 0,<br />
dragStartY: 0,<br />
dragStartRotation: 0,<br />
dragAxis: null,<br />
pointerCaptured: false,<br />
lastX: 0,<br />
lastTime: 0,<br />
releaseVelocity: 0,<br />
suppressClickUntil: 0,<br />
raf: null,<br />
pendingRotation: 0,<br />
snapTimer: null,<br />
inertiaRaf: null,<br />
navigateTimer: null,<br />
bound: false,<br />
boundElement: null,<br />
rotor: null,<br />
cx: 101,<br />
cy: 119,<br />
outerR: 109,<br />
innerR: 28,<br />
sectorAngle: 30,<br />
halfSector: 15,<br />
repeats: 8,<br />
dragSensitivity: 0.58,<br />
maxSpinVelocity: 1.75,<br />
minSpinVelocity: 0.055,<br />
spinDecel: 0.00185<br />
};<br />
<br />
function createSidebarLanguageSvgEl(tag) {<br />
return document.createElementNS(SIDEBAR_LANG_SVG_NS, tag);<br />
}<br />
<br />
function normalizeSidebarLanguageIndex(index) {<br />
var length = sidebarLanguageState.order.length;<br />
var normalized = index % length;<br />
return normalized < 0 ? normalized + length : normalized;<br />
}<br />
<br />
function getSidebarLanguageName(lang) {<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || String(lang || '').toUpperCase();<br />
}<br />
<br />
function getSidebarLanguageDialName(lang) {<br />
return SIDEBAR_LANGUAGE_DIAL_LABELS[lang] || getSidebarLanguageName(lang);<br />
}<br />
<br />
function normalizeSidebarLanguageStatusValue(value) {<br />
value = String(value == null ? '' : value).toLowerCase().trim();<br />
return SIDEBAR_LANGUAGE_STATUS_VALUES[value] ? value : '';<br />
}<br />
<br />
function getSidebarLanguageStatusPageKey() {<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
<br />
return normalized || raw || '대문';<br />
}<br />
<br />
function getSidebarLanguageStatusEntry() {<br />
var registry = sidebarLanguageStatusRegistry || {};<br />
var pages = registry.pages && typeof registry.pages === 'object' ? registry.pages : registry;<br />
var raw = String(mw.config.get('wgPageName') || '').trim();<br />
var normalized = normalizePageName(raw);<br />
var title = String(mw.config.get('wgTitle') || '').trim();<br />
var keys = [<br />
normalized,<br />
raw,<br />
raw.replace(/_/g, ' '),<br />
normalized.replace(/ /g, '_'),<br />
title,<br />
title.replace(/_/g, ' ')<br />
];<br />
var i;<br />
<br />
for (i = 0; i < keys.length; i += 1) {<br />
if (keys[i] && pages[keys[i]] && typeof pages[keys[i]] === 'object') {<br />
return pages[keys[i]];<br />
}<br />
}<br />
<br />
return {};<br />
}<br />
<br />
function getSidebarLanguageStatusOverride(lang) {<br />
var entry = getSidebarLanguageStatusEntry();<br />
return normalizeSidebarLanguageStatusValue(entry[lang]);<br />
}<br />
<br />
function flushSidebarLanguageStatusCallbacks() {<br />
var callbacks = sidebarLanguageStatusCallbacks.slice();<br />
sidebarLanguageStatusCallbacks.length = 0;<br />
<br />
callbacks.forEach(function(callback) {<br />
if (typeof callback === 'function') {<br />
callback(sidebarLanguageStatusRegistry);<br />
}<br />
});<br />
}<br />
<br />
function loadSidebarLanguageStatusRegistry(callback, force) {<br />
if (typeof callback === 'function') {<br />
sidebarLanguageStatusCallbacks.push(callback);<br />
}<br />
<br />
if (sidebarLanguageStatusLoaded && !force) {<br />
flushSidebarLanguageStatusCallbacks();<br />
return;<br />
}<br />
<br />
if (sidebarLanguageStatusLoading) return;<br />
<br />
sidebarLanguageStatusLoading = true;<br />
<br />
$.ajax({<br />
url: mw.util.getUrl(SIDEBAR_LANGUAGE_STATUS_TITLE, {<br />
action: 'raw',<br />
ctype: 'application/json',<br />
_: String(Date.now())<br />
}),<br />
dataType: 'text',<br />
cache: false<br />
}).done(function(text) {<br />
var parsed = {};<br />
<br />
try {<br />
parsed = text ? JSON.parse(text) : {};<br />
} catch (err) {<br />
console.error('LanguageStatus.json parse failed:', err);<br />
parsed = {};<br />
}<br />
<br />
sidebarLanguageStatusRegistry = parsed && typeof parsed === 'object' ? parsed : {};<br />
}).fail(function() {<br />
sidebarLanguageStatusRegistry = {};<br />
}).always(function() {<br />
sidebarLanguageStatusLoaded = true;<br />
sidebarLanguageStatusLoading = false;<br />
flushSidebarLanguageStatusCallbacks();<br />
});<br />
}<br />
<br />
window.CLBI_LANGUAGE_STATUS = {<br />
title: SIDEBAR_LANGUAGE_STATUS_TITLE,<br />
languages: sidebarLanguageState.order.slice(),<br />
labels: SIDEBAR_LANGUAGE_LABELS,<br />
dialLabels: SIDEBAR_LANGUAGE_DIAL_LABELS,<br />
getPageKey: getSidebarLanguageStatusPageKey,<br />
getRegistry: function() {<br />
return sidebarLanguageStatusRegistry || {};<br />
},<br />
reload: function(callback) {<br />
sidebarLanguageStatusLoaded = false;<br />
loadSidebarLanguageStatusRegistry(function() {<br />
renderSidebarLanguageBox();<br />
if (typeof callback === 'function') callback(sidebarLanguageStatusRegistry);<br />
}, true);<br />
},<br />
refreshDial: function() {<br />
renderSidebarLanguageBox();<br />
}<br />
};<br />
<br />
function getSidebarLanguageMeta(lang) {<br />
var currentLang = getCurrentLang();<br />
var targetTitle = getLanguageTargetTitle(lang);<br />
var isCurrent = lang === currentLang;<br />
<br />
return {<br />
lang: lang,<br />
code: getLangShortCode(lang),<br />
name: getSidebarLanguageName(lang),<br />
dialName: getSidebarLanguageDialName(lang),<br />
targetTitle: targetTitle,<br />
isCurrent: isCurrent,<br />
canMove: !!targetTitle && !isCurrent<br />
};<br />
}<br />
<br />
function getSidebarLanguageStatus(meta) {<br />
var override;<br />
<br />
if (!meta) {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (meta.isCurrent) {<br />
return {<br />
className: 'is-current',<br />
label: 'CURRENT',<br />
canApply: false<br />
};<br />
}<br />
<br />
override = getSidebarLanguageStatusOverride(meta.lang);<br />
<br />
if (override === 'wip') {<br />
return {<br />
className: 'is-locked',<br />
label: 'WIP',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'unavailable') {<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
if (override === 'available' || meta.targetTitle) {<br />
return {<br />
className: meta.targetTitle ? 'is-ready' : 'is-locked',<br />
label: meta.targetTitle ? 'AVAILABLE' : 'UNAVAILABLE',<br />
canApply: !!meta.targetTitle<br />
};<br />
}<br />
<br />
return {<br />
className: 'is-locked',<br />
label: 'UNAVAILABLE',<br />
canApply: false<br />
};<br />
}<br />
<br />
function sidebarLanguageRad(deg) {<br />
return (deg * Math.PI) / 180;<br />
}<br />
<br />
function sidebarLanguagePointAt(radius, deg) {<br />
var state = sidebarLanguageState;<br />
var angle = sidebarLanguageRad(deg);<br />
<br />
return {<br />
x: state.cx + Math.sin(angle) * radius,<br />
y: state.cy - Math.cos(angle) * radius<br />
};<br />
}<br />
<br />
function getSidebarLanguageSectorPath(start, end) {<br />
var state = sidebarLanguageState;<br />
var p1 = sidebarLanguagePointAt(state.outerR, start);<br />
var p2 = sidebarLanguagePointAt(state.outerR, end);<br />
var p3 = sidebarLanguagePointAt(state.innerR, end);<br />
var p4 = sidebarLanguagePointAt(state.innerR, start);<br />
var largeArc = Math.abs(end - start) > 180 ? 1 : 0;<br />
<br />
return [<br />
'M', p1.x.toFixed(3), p1.y.toFixed(3),<br />
'A', state.outerR, state.outerR, 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),<br />
'L', p3.x.toFixed(3), p3.y.toFixed(3),<br />
'A', state.innerR, state.innerR, 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),<br />
'Z'<br />
].join(' ');<br />
}<br />
<br />
function getSidebarLanguageShellPath() {<br />
return getSidebarLanguageSectorPath(-68, 68);<br />
}<br />
<br />
function getSidebarLanguageByStep(step) {<br />
var state = sidebarLanguageState;<br />
var index = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
return {<br />
index: index,<br />
meta: getSidebarLanguageMeta(state.order[index])<br />
};<br />
}<br />
<br />
function getSidebarLanguagePreviewIndex() {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
return normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
}<br />
<br />
function getSidebarLanguagePreviewMeta() {<br />
var state = sidebarLanguageState;<br />
return getSidebarLanguageMeta(state.order[getSidebarLanguagePreviewIndex()]);<br />
}<br />
<br />
function makeSidebarLanguageSector(step) {<br />
var state = sidebarLanguageState;<br />
var item = getSidebarLanguageByStep(step);<br />
var group = createSidebarLanguageSvgEl('g');<br />
var path = createSidebarLanguageSvgEl('path');<br />
var label = createSidebarLanguageSvgEl('text');<br />
var labelY = state.cy - 78;<br />
var angle = step * state.sectorAngle;<br />
<br />
group.setAttribute('class', 'sidebar-lang-sector-group');<br />
group.setAttribute('data-step', String(step));<br />
group.setAttribute('data-index', String(item.index));<br />
group.setAttribute('data-lang', item.meta.lang);<br />
group.setAttribute('transform', 'rotate(' + angle + ' ' + state.cx + ' ' + state.cy + ')');<br />
<br />
path.setAttribute('class', 'sidebar-lang-sector');<br />
path.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
<br />
label.setAttribute('class', 'sidebar-lang-sector-label');<br />
label.setAttribute('x', String(state.cx));<br />
label.setAttribute('y', String(labelY + 5));<br />
label.textContent = item.meta.dialName || item.meta.name;<br />
<br />
group.appendChild(path);<br />
group.appendChild(label);<br />
<br />
group.addEventListener('click', function(e) {<br />
if (sidebarLanguageState.dragging || performance.now() < sidebarLanguageState.suppressClickUntil) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
cancelSidebarLanguageSpin();<br />
snapSidebarLanguageToStep(parseInt(group.getAttribute('data-step') || '0', 10), true);<br />
});<br />
<br />
return group;<br />
}<br />
<br />
function renderSidebarLanguageWheel() {<br />
var state = sidebarLanguageState;<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var svg;<br />
var defs;<br />
var clip;<br />
var clipPath;<br />
var shadowBlur;<br />
var blur;<br />
var fixedDepthGradient;<br />
var shell;<br />
var clipped;<br />
var rotor;<br />
var fixedDepthPath;<br />
var fixedFocus;<br />
var shadowSoft;<br />
var shadowHard;<br />
var rim;<br />
var pointer;<br />
var tri;<br />
var line;<br />
var step;<br />
<br />
if (!fan) return;<br />
<br />
fan.innerHTML = '';<br />
<br />
svg = createSidebarLanguageSvgEl('svg');<br />
svg.setAttribute('class', 'sidebar-lang-fan-svg');<br />
svg.setAttribute('viewBox', '0 0 202 150');<br />
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');<br />
svg.setAttribute('role', 'img');<br />
svg.setAttribute('aria-label', '언어 선택 다이얼');<br />
<br />
defs = createSidebarLanguageSvgEl('defs');<br />
<br />
clip = createSidebarLanguageSvgEl('clipPath');<br />
clip.setAttribute('id', 'clbi-sidebar-language-fan-clip');<br />
clipPath = createSidebarLanguageSvgEl('path');<br />
clipPath.setAttribute('d', getSidebarLanguageShellPath());<br />
clip.appendChild(clipPath);<br />
<br />
shadowBlur = createSidebarLanguageSvgEl('filter');<br />
shadowBlur.setAttribute('id', 'clbi-sidebar-language-shadow-blur');<br />
shadowBlur.setAttribute('x', '-20%');<br />
shadowBlur.setAttribute('y', '-20%');<br />
shadowBlur.setAttribute('width', '140%');<br />
shadowBlur.setAttribute('height', '140%');<br />
blur = createSidebarLanguageSvgEl('feGaussianBlur');<br />
blur.setAttribute('stdDeviation', '3');<br />
shadowBlur.appendChild(blur);<br />
<br />
fixedDepthGradient = createSidebarLanguageSvgEl('linearGradient');<br />
fixedDepthGradient.setAttribute('id', 'clbi-sidebar-language-fixed-depth');<br />
fixedDepthGradient.setAttribute('x1', '0');<br />
fixedDepthGradient.setAttribute('y1', '0');<br />
fixedDepthGradient.setAttribute('x2', '0');<br />
fixedDepthGradient.setAttribute('y2', '1');<br />
<br />
[<br />
['0%', '#ffffff', '0.030'],<br />
['34%', '#ffffff', '0.006'],<br />
['58%', '#000000', '0.030'],<br />
['100%', '#000000', '0.250']<br />
].forEach(function(item) {<br />
var stop = createSidebarLanguageSvgEl('stop');<br />
stop.setAttribute('offset', item[0]);<br />
stop.setAttribute('stop-color', item[1]);<br />
stop.setAttribute('stop-opacity', item[2]);<br />
fixedDepthGradient.appendChild(stop);<br />
});<br />
<br />
defs.appendChild(clip);<br />
defs.appendChild(shadowBlur);<br />
defs.appendChild(fixedDepthGradient);<br />
svg.appendChild(defs);<br />
<br />
shell = createSidebarLanguageSvgEl('path');<br />
shell.setAttribute('class', 'sidebar-lang-shell');<br />
shell.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shell);<br />
<br />
clipped = createSidebarLanguageSvgEl('g');<br />
clipped.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
rotor = createSidebarLanguageSvgEl('g');<br />
rotor.setAttribute('id', 'clbi-sidebar-lang-wheel-rotor');<br />
rotor.setAttribute('class', 'sidebar-lang-wheel-rotor');<br />
<br />
for (step = -state.repeats; step <= state.repeats; step += 1) {<br />
rotor.appendChild(makeSidebarLanguageSector(step));<br />
}<br />
<br />
clipped.appendChild(rotor);<br />
svg.appendChild(clipped);<br />
<br />
fixedDepthPath = createSidebarLanguageSvgEl('path');<br />
fixedDepthPath.setAttribute('class', 'sidebar-lang-fixed-depth');<br />
fixedDepthPath.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(fixedDepthPath);<br />
<br />
fixedFocus = createSidebarLanguageSvgEl('path');<br />
fixedFocus.setAttribute('class', 'sidebar-lang-fixed-focus');<br />
fixedFocus.setAttribute('d', getSidebarLanguageSectorPath(-state.halfSector, state.halfSector));<br />
svg.appendChild(fixedFocus);<br />
<br />
shadowSoft = createSidebarLanguageSvgEl('path');<br />
shadowSoft.setAttribute('class', 'sidebar-lang-inner-shadow-soft');<br />
shadowSoft.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowSoft);<br />
<br />
shadowHard = createSidebarLanguageSvgEl('path');<br />
shadowHard.setAttribute('class', 'sidebar-lang-inner-shadow-hard');<br />
shadowHard.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(shadowHard);<br />
<br />
rim = createSidebarLanguageSvgEl('path');<br />
rim.setAttribute('class', 'sidebar-lang-rim');<br />
rim.setAttribute('d', getSidebarLanguageShellPath());<br />
svg.appendChild(rim);<br />
<br />
pointer = createSidebarLanguageSvgEl('g');<br />
pointer.setAttribute('class', 'sidebar-lang-fixed-pointer');<br />
pointer.setAttribute('clip-path', 'url(#clbi-sidebar-language-fan-clip)');<br />
<br />
tri = createSidebarLanguageSvgEl('path');<br />
tri.setAttribute('class', 'sidebar-lang-pointer-triangle');<br />
tri.setAttribute('d', 'M ' + (state.cx - 10) + ' 10 L ' + (state.cx + 10) + ' 10 L ' + state.cx + ' 26 Z');<br />
pointer.appendChild(tri);<br />
<br />
line = createSidebarLanguageSvgEl('line');<br />
line.setAttribute('class', 'sidebar-lang-pointer-line');<br />
line.setAttribute('x1', String(state.cx));<br />
line.setAttribute('x2', String(state.cx));<br />
line.setAttribute('y1', '24');<br />
line.setAttribute('y2', '112');<br />
pointer.appendChild(line);<br />
<br />
svg.appendChild(pointer);<br />
fan.appendChild(svg);<br />
<br />
state.rotor = rotor;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
}<br />
<br />
function updateSidebarLanguageDial() {<br />
var state = sidebarLanguageState;<br />
var meta = getSidebarLanguagePreviewMeta();<br />
var status = getSidebarLanguageStatus(meta);<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
var selectedValue = document.getElementById('clbi-sidebar-lang-selected-value');<br />
var availabilityPanel = document.getElementById('clbi-sidebar-lang-availability-panel');<br />
var availabilityValue = document.getElementById('clbi-sidebar-lang-availability-value');<br />
<br />
if (selectedValue) {<br />
selectedValue.textContent = meta.name;<br />
}<br />
<br />
if (availabilityPanel) {<br />
availabilityPanel.classList.remove('is-ready', 'is-current', 'is-locked');<br />
availabilityPanel.classList.add(status.className);<br />
}<br />
<br />
if (availabilityValue) {<br />
availabilityValue.textContent = status.label;<br />
}<br />
<br />
if (apply) {<br />
apply.classList.toggle('is-disabled', !status.canApply);<br />
apply.setAttribute('aria-disabled', status.canApply ? 'false' : 'true');<br />
apply.setAttribute('aria-label', status.canApply ? (meta.name + ' 적용') : (meta.isCurrent ? '현재 언어' : '사용할 수 없는 언어'));<br />
}<br />
<br />
if (selector) {<br />
selector.setAttribute('data-selected-lang', meta.lang);<br />
selector.setAttribute('data-selected-code', meta.code);<br />
selector.classList.toggle('is-current', meta.isCurrent);<br />
selector.classList.toggle('is-ready', status.canApply);<br />
selector.classList.toggle('is-locked', !status.canApply && !meta.isCurrent);<br />
selector.classList.toggle('is-dragging', !!state.dragging);<br />
selector.classList.toggle('is-spinning', !!state.inertiaRaf);<br />
}<br />
<br />
return {<br />
meta: meta,<br />
status: status<br />
};<br />
}<br />
<br />
function setSidebarLanguageRotation(value, animate) {<br />
var state = sidebarLanguageState;<br />
state.rotation = value;<br />
updateSidebarLanguageDial();<br />
<br />
if (!state.rotor) return;<br />
<br />
if (animate) {<br />
$('#clbi-sidebar-lang-selector').addClass('is-snapping');<br />
} else {<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping');<br />
}<br />
<br />
state.rotor.style.transform = 'rotate(' + state.rotation.toFixed(3) + 'deg)';<br />
}<br />
<br />
function requestSidebarLanguageRotation(value) {<br />
var state = sidebarLanguageState;<br />
state.pendingRotation = value;<br />
<br />
if (state.raf) return;<br />
<br />
state.raf = requestAnimationFrame(function() {<br />
state.raf = null;<br />
setSidebarLanguageRotation(state.pendingRotation, false);<br />
});<br />
}<br />
<br />
function cancelSidebarLanguageSpin() {<br />
var state = sidebarLanguageState;<br />
<br />
if (state.inertiaRaf) {<br />
cancelAnimationFrame(state.inertiaRaf);<br />
state.inertiaRaf = null;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
}<br />
<br />
function finishSidebarLanguageSnap(nearestIndex, callback) {<br />
var state = sidebarLanguageState;<br />
<br />
state.baseIndex = normalizeSidebarLanguageIndex(nearestIndex);<br />
state.selectedIndex = state.baseIndex;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
<br />
$('#clbi-sidebar-lang-selector').removeClass('is-snapping is-dragging is-spinning');<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
<br />
if (typeof callback === 'function') {<br />
callback(getSidebarLanguageMeta(state.order[state.selectedIndex]));<br />
}<br />
}<br />
<br />
function snapSidebarLanguageToStep(step, animate, callback) {<br />
var state = sidebarLanguageState;<br />
var targetRotation = -step * state.sectorAngle;<br />
var nearestIndex = normalizeSidebarLanguageIndex(state.baseIndex + step);<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.selectedIndex = nearestIndex;<br />
setSidebarLanguageRotation(targetRotation, !!animate);<br />
<br />
state.snapTimer = setTimeout(function() {<br />
finishSidebarLanguageSnap(nearestIndex, callback);<br />
}, animate ? 230 : 0);<br />
}<br />
<br />
function snapSidebarLanguageNearest(callback) {<br />
var state = sidebarLanguageState;<br />
var step = Math.round(-state.rotation / state.sectorAngle);<br />
snapSidebarLanguageToStep(step, true, callback);<br />
}<br />
<br />
function startSidebarLanguageInertiaSpin(initialVelocity) {<br />
var state = sidebarLanguageState;<br />
var velocity;<br />
var lastFrame;<br />
<br />
cancelSidebarLanguageSpin();<br />
<br />
velocity = Math.max(-state.maxSpinVelocity, Math.min(state.maxSpinVelocity, initialVelocity));<br />
<br />
if (Math.abs(velocity) < state.minSpinVelocity) {<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
$('#clbi-sidebar-lang-selector').addClass('is-spinning');<br />
lastFrame = performance.now();<br />
<br />
function frame(now) {<br />
var dt = Math.min(34, Math.max(1, now - lastFrame));<br />
var sign = velocity < 0 ? -1 : 1;<br />
var nextSpeed;<br />
<br />
lastFrame = now;<br />
state.rotation += velocity * dt;<br />
setSidebarLanguageRotation(state.rotation, false);<br />
<br />
nextSpeed = Math.max(0, Math.abs(velocity) - (state.spinDecel * dt));<br />
velocity = sign * nextSpeed;<br />
<br />
if (nextSpeed <= state.minSpinVelocity) {<br />
state.inertiaRaf = null;<br />
$('#clbi-sidebar-lang-selector').removeClass('is-spinning');<br />
snapSidebarLanguageNearest();<br />
return;<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
state.inertiaRaf = requestAnimationFrame(frame);<br />
}<br />
<br />
function scheduleSidebarLanguageNavigation(meta) {<br />
var status = getSidebarLanguageStatus(meta);<br />
<br />
if (!meta || !status.canApply) return;<br />
<br />
clearTimeout(sidebarLanguageState.navigateTimer);<br />
sidebarLanguageState.navigateTimer = setTimeout(function() {<br />
var title = getLanguageTargetTitle(meta.lang);<br />
<br />
if (!title || meta.lang === getCurrentLang()) return;<br />
<br />
window.location.href = buildWikiPath(title);<br />
}, 70);<br />
}<br />
<br />
function setSidebarLanguageSelection(lang) {<br />
var state = sidebarLanguageState;<br />
var index = state.order.indexOf(lang);<br />
<br />
if (index < 0) index = state.order.indexOf(getCurrentLang());<br />
if (index < 0) index = 0;<br />
<br />
if (state.raf) {<br />
cancelAnimationFrame(state.raf);<br />
state.raf = null;<br />
}<br />
<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.currentLang = lang;<br />
state.baseIndex = index;<br />
state.selectedIndex = index;<br />
state.rotation = 0;<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.releaseVelocity = 0;<br />
<br />
renderSidebarLanguageWheel();<br />
updateSidebarLanguageDial();<br />
}<br />
<br />
function moveSidebarLanguageSelection(delta) {<br />
snapSidebarLanguageToStep(-delta, true);<br />
}<br />
<br />
function bindSidebarLanguageSelector() {<br />
var state = sidebarLanguageState;<br />
var selector = document.getElementById('clbi-sidebar-lang-selector');<br />
var fan = document.getElementById('clbi-sidebar-lang-fan');<br />
var apply = document.getElementById('clbi-sidebar-lang-apply');<br />
<br />
if (!selector || !fan || !apply) return;<br />
<br />
if (state.bound && state.boundElement === selector) return;<br />
<br />
state.bound = true;<br />
state.boundElement = selector;<br />
<br />
fan.addEventListener('pointerdown', function(e) {<br />
cancelSidebarLanguageSpin();<br />
clearTimeout(state.snapTimer);<br />
<br />
state.dragging = true;<br />
state.dragMoved = false;<br />
state.dragStartX = e.clientX;<br />
state.dragStartY = e.clientY || 0;<br />
state.dragStartRotation = state.rotation;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
state.lastX = e.clientX;<br />
state.lastTime = performance.now();<br />
state.releaseVelocity = 0;<br />
<br />
selector.classList.add('is-dragging');<br />
selector.classList.remove('is-snapping');<br />
<br />
/*<br />
Vertical page scrolling must stay available when the pointer starts on<br />
the language dial. Capture and preventDefault are delayed until a<br />
horizontal drag is confirmed.<br />
*/<br />
});<br />
<br />
fan.addEventListener('pointermove', function(e) {<br />
var now;<br />
var totalDx;<br />
var totalDy;<br />
var frameDx;<br />
var dt;<br />
var instantVelocity;<br />
<br />
if (!state.dragging) return;<br />
<br />
totalDx = e.clientX - state.dragStartX;<br />
totalDy = (e.clientY || 0) - state.dragStartY;<br />
<br />
if (!state.dragAxis && (Math.abs(totalDx) > 4 || Math.abs(totalDy) > 4)) {<br />
state.dragAxis = Math.abs(totalDx) >= Math.abs(totalDy) ? 'x' : 'y';<br />
<br />
if (state.dragAxis === 'y') {<br />
state.dragging = false;<br />
state.dragMoved = false;<br />
state.dragAxis = null;<br />
state.pointerCaptured = false;<br />
selector.classList.remove('is-dragging');<br />
return;<br />
}<br />
<br />
if (fan.setPointerCapture && e.pointerId != null) {<br />
try {<br />
fan.setPointerCapture(e.pointerId);<br />
state.pointerCaptured = true;<br />
} catch (err) {<br />
state.pointerCaptured = false;<br />
}<br />
}<br />
}<br />
<br />
if (state.dragAxis !== 'x') return;<br />
<br />
now = performance.now();<br />
frameDx = e.clientX - state.lastX;<br />
dt = Math.max(1, now - state.lastTime);<br />
<br />
if (Math.abs(totalDx) > 3) state.dragMoved = true;<br />
<br />
instantVelocity = (frameDx * state.dragSensitivity) / dt;<br />
state.releaseVelocity = (state.releaseVelocity * 0.62) + (instantVelocity * 0.38);<br />
state.lastX = e.clientX;<br />
state.lastTime = now;<br />
<br />
requestSidebarLanguageRotation(state.dragStartRotation + totalDx * state.dragSensitivity);<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
function finishDrag(e) {<br />
var velocityAge;<br />
var throwVelocity;<br />
var wasHorizontal;<br />
<br />
if (!state.dragging) return;<br />
<br />
wasHorizontal = state.dragAxis === 'x';<br />
state.dragging = false;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (fan.releasePointerCapture && state.pointerCaptured && e && e.pointerId != null) {<br />
try { fan.releasePointerCapture(e.pointerId); } catch (err) {}<br />
}<br />
<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
<br />
if (!wasHorizontal && !state.dragMoved) {<br />
return;<br />
}<br />
<br />
velocityAge = performance.now() - state.lastTime;<br />
throwVelocity = velocityAge > 120 ? 0 : state.releaseVelocity;<br />
<br />
if (state.dragMoved) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
}<br />
<br />
if (state.dragMoved && Math.abs(throwVelocity) >= state.minSpinVelocity) {<br />
startSidebarLanguageInertiaSpin(throwVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
<br />
if (e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
}<br />
}<br />
<br />
fan.addEventListener('pointerup', finishDrag);<br />
fan.addEventListener('pointercancel', finishDrag);<br />
fan.addEventListener('lostpointercapture', function() {<br />
if (!state.dragging) return;<br />
<br />
state.dragging = false;<br />
state.pointerCaptured = false;<br />
state.dragAxis = null;<br />
selector.classList.remove('is-dragging');<br />
<br />
if (state.dragMoved && Math.abs(state.releaseVelocity) >= state.minSpinVelocity) {<br />
state.suppressClickUntil = performance.now() + 180;<br />
startSidebarLanguageInertiaSpin(state.releaseVelocity);<br />
} else {<br />
snapSidebarLanguageNearest();<br />
}<br />
});<br />
<br />
apply.addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
snapSidebarLanguageNearest(function(meta) {<br />
scheduleSidebarLanguageNavigation(meta);<br />
});<br />
});<br />
<br />
selector.addEventListener('keydown', function(e) {<br />
if (e.key === 'ArrowLeft') {<br />
moveSidebarLanguageSelection(-1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'ArrowRight') {<br />
moveSidebarLanguageSelection(1);<br />
e.preventDefault();<br />
}<br />
<br />
if (e.key === 'Enter' || e.key === ' ') {<br />
apply.click();<br />
e.preventDefault();<br />
}<br />
});<br />
}<br />
<br />
function renderSidebarLanguageBox() {<br />
bindSidebarLanguageSelector();<br />
setSidebarLanguageSelection(getCurrentLang());<br />
<br />
if (!sidebarLanguageStatusLoaded) {<br />
loadSidebarLanguageStatusRegistry(function() {<br />
setSidebarLanguageSelection(getCurrentLang());<br />
});<br />
}<br />
}<br />
<br />
function loadRecentChangesList(targetSelector, limit) {<br />
var $target = $(targetSelector);<br />
<br />
if (!$target.length) return;<br />
<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
var isNewsList = $target.closest('.clbi-left-news-box').length > 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
$target.html((t && t.loading) ? t.loading : '불러오는 중...');<br />
<br />
$.getJSON(<br />
'/api.php?action=query&list=recentchanges&rclimit=' + encodeURIComponent(limit || 5) + '&rcprop=title|timestamp|user&format=json&rcnamespace=0&rctype=edit|new',<br />
function(data) {<br />
var items = data && data.query ? data.query.recentchanges : [];<br />
var html = '';<br />
<br />
if (!items || !items.length) {<br />
$target.html('표시할 변경 사항이 없습니다.');<br />
return;<br />
}<br />
<br />
$.each(items, function(i, item) {<br />
var label = timeAgo(item.timestamp);<br />
var title = item.title || '';<br />
var userName = item.user || 'Unknown';<br />
var pageHref = buildWikiPath(title);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(userName) + '.png';<br />
<br />
if (isNewsList) {<br />
html +=<br />
'<a href="' + escapeHtml(pageHref) + '" class="news-recent-item">' +<br />
'<img class="news-recent-avatar" src="' + escapeHtml(avatarSrc) + '" alt="" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'<div class="news-recent-main">' +<br />
'<div class="news-recent-title-wrap">' +<br />
'<span class="news-recent-title">' + escapeHtml(title) + '</span>' +<br />
'</div>' +<br />
'<div class="news-recent-meta">' +<br />
'<span class="news-recent-user">@' + escapeHtml(userName) + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<span class="news-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</a>';<br />
} else {<br />
html +=<br />
'<div class="clbi-recent-item">' +<br />
'<div class="clbi-recent-title-wrap">' +<br />
'<a href="' + escapeHtml(pageHref) + '" class="clbi-recent-title">' + escapeHtml(title) + '</a>' +<br />
'</div>' +<br />
'<span class="clbi-recent-time">' + escapeHtml(label) + '</span>' +<br />
'</div>';<br />
}<br />
});<br />
<br />
$target.html(html);<br />
<br />
$target.find(isNewsList ? '.news-recent-item' : '.clbi-recent-item').each(function() {<br />
var wrap = $(this).find(isNewsList ? '.news-recent-title-wrap' : '.clbi-recent-title-wrap');<br />
var title = $(this).find(isNewsList ? '.news-recent-title' : '.clbi-recent-title');<br />
<br />
if (!wrap.length || !title.length) return;<br />
<br />
var wrapW = wrap.width();<br />
var titleW = title[0].scrollWidth;<br />
<br />
if (titleW > wrapW + 20) {<br />
var duration = titleW / 40;<br />
<br />
title.css({<br />
animation: 'clbi-scroll ' + duration + 's linear infinite',<br />
'--scroll-dist': '-' + (titleW - wrapW + 8) + 'px'<br />
});<br />
}<br />
});<br />
}<br />
).fail(function() {<br />
var lang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[lang]) ? window.LANG[lang] : (window.LANG ? window.LANG.ko : null);<br />
<br />
$target.html((t && t.loadFail) ? t.loadFail : '불러오기 실패');<br />
});<br />
}<br />
<br />
// 국가_및_조합 전용 왼쪽 사이드바 이미지<br />
function updateLeftSidebarNationsImage() {<br />
$('#clbi-left-nations-image').remove();<br />
}<br />
<br />
function setProfileActionLabel(selector, text) {<br />
var target = $(selector);<br />
var label = target.find('.profile-action-label');<br />
<br />
if (label.length) {<br />
label.text(text);<br />
} else {<br />
target.text(text);<br />
}<br />
}<br />
<br />
// 사이드바 업데이트<br />
function updateSidebar() {<br />
if (!window.LANG) {<br />
setTimeout(updateSidebar, 100);<br />
return;<br />
}<br />
<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
<br />
var newsTitle = t.news || '뉴스';<br />
var changelogTitle = t.changelog || '체인지로그';<br />
var recentTitle = t.recentChanges || '최근 변경';<br />
var languageTitle = t.language || '언어';<br />
<br />
$('#clbi-title-left-language').text(languageTitle);<br />
renderSidebarLanguageBox();<br />
<br />
$('#clbi-title-left-news').text(newsTitle);<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-main').text(recentTitle);<br />
<br />
$('#clbi-title-search a').text(t.search);<br />
$('#clbi-search-input').attr('placeholder', t.search + '...');<br />
$('#clbi-title-recent a').text(recentTitle);<br />
$('#clbi-title-guide-label').text(t.guide);<br />
$('#clbi-guide-link').text(t.getStarted);<br />
$('#clbi-title-links-label').text(t.links);<br />
<br />
setProfileActionLabel('#clbi-btn-contribution', t.contribution);<br />
setProfileActionLabel('#clbi-btn-watchlist', t.watchlist);<br />
setProfileActionLabel('#clbi-btn-preferences', t.preferences);<br />
setProfileActionLabel('#clbi-btn-logout', t.logout);<br />
setProfileActionLabel('#clbi-btn-login', t.login);<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var specialPage = String(mw.config.get('wgCanonicalSpecialPageName') || '');<br />
<br />
$('#clbi-left-news-changelog-main').text(changelogTitle);<br />
$('#clbi-left-news-recent-title').text('RECENT CHANGES');<br />
<br />
$('.clbi-user-btn').removeClass('clbi-user-btn-active');<br />
<br />
if (<br />
specialPage === 'Contributions' ||<br />
specialPage === '기여' ||<br />
pageName.indexOf('특수:기여') === 0 ||<br />
pageName.indexOf('Special:Contributions') === 0<br />
) {<br />
$('#clbi-btn-contribution').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (specialPage === 'Watchlist') {<br />
$('#clbi-btn-watchlist').addClass('clbi-user-btn-active');<br />
}<br />
<br />
if (<br />
specialPage === '설정' ||<br />
pageName === '특수:설정' ||<br />
pageName === 'Special:설정'<br />
) {<br />
$('#clbi-btn-preferences').addClass('clbi-user-btn-active');<br />
}<br />
<br />
$('.toggleBtn').each(function() {<br />
var btn = $(this);<br />
<br />
if (!$('#' + btn.data('target')).hasClass('folding-open')) {<br />
btn.text(t.expand);<br />
} else {<br />
btn.text(t.collapse);<br />
}<br />
});<br />
<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
<br />
function isMediaWikiSystemAssetPage() {<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
<br />
if (namespaceNumber !== 8) return false;<br />
<br />
return /\.(css|js)$/i.test(pageName);<br />
}<br />
<br />
function removeSystemDocIndicator() {<br />
$('body').removeClass('clbi-system-doc-page');<br />
$('#clbi-system-doc-indicator-row').remove();<br />
}<br />
<br />
function renderSystemDocIndicator() {<br />
removeSystemDocIndicator();<br />
<br />
if (!isMediaWikiSystemAssetPage()) return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var extMatch = pageName.match(/\.(css|js)$/i);<br />
var ext = extMatch ? extMatch[1].toUpperCase() : 'DOC';<br />
<br />
$('body').addClass('clbi-system-doc-page');<br />
<br />
var $row = $('<div id="clbi-system-doc-indicator-row" class="clbi-system-doc-indicator-row"></div>');<br />
var $box = $('<div class="clbi-system-doc-indicator"></div>');<br />
var $meta = $('<div class="clbi-system-doc-meta"></div>');<br />
var $label = $('<span class="clbi-system-doc-label"></span>').text('SYSTEM DOCUMENT');<br />
var $type = $('<span class="clbi-system-doc-type"></span>').text(ext);<br />
var $title = $('<div class="clbi-system-doc-title"></div>').text(pageName);<br />
<br />
$meta.append($label).append($type);<br />
$box.append($meta).append($title);<br />
$row.append($box);<br />
<br />
var $anchor = $('.liberty-content-main .mw-parser-output').first();<br />
if ($anchor.length) {<br />
$anchor.before($row);<br />
} else {<br />
$('.liberty-content-main').prepend($row);<br />
}<br />
}<br />
<br />
function canShowContentTools() {<br />
// 비로그인 사용자는 편집/역사/공유 버튼을 숨김<br />
if (!mw.config.get('wgUserName')) {<br />
return false;<br />
}<br />
<br />
// MediaWiki가 현재 문서를 편집 가능하지 않다고 판단하면 숨김<br />
var isEditable = mw.config.get('wgIsProbablyEditable');<br />
if (isEditable === false) {<br />
return false;<br />
}<br />
<br />
var relevantEditable = mw.config.get('wgRelevantPageIsProbablyEditable');<br />
if (relevantEditable === false) {<br />
return false;<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function moveCatlinksToBottom() {<br />
var main = $('.liberty-content-main');<br />
var parserOutput = $('.liberty-content-main .mw-parser-output').first();<br />
var catlinks = $('.catlinks');<br />
<br />
if (!main.length || !catlinks.length) return;<br />
<br />
catlinks.each(function () {<br />
var cat = $(this);<br />
<br />
if (parserOutput.length) {<br />
cat.appendTo(parserOutput);<br />
} else {<br />
cat.appendTo(main);<br />
}<br />
});<br />
}<br />
<br />
// 대문 스타일<br />
function initCategoryNavIfAvailable(root) {<br />
/*<br />
CategoryNav.js는 대문 카테고리 네비를 SVG로 생성한다.<br />
<br />
Common.js가 SPA로 본문을 갈아끼운 뒤에는 MediaWiki 원래 페이지 로드와 달리<br />
CategoryNav.js의 초기 DOMContentLoaded만으로는 새 mount를 다시 잡지 못할 수 있다.<br />
CategoryNav.js 자체도 mw.hook('wikipage.content')를 듣지만, 로드 순서와 SPA 타이밍이<br />
엇갈릴 수 있으므로 Common.js 쪽에서도 존재 여부를 확인한 뒤 한 번 더 호출한다.<br />
<br />
이 함수는 CategoryNav.js가 아직 로드되지 않았으면 아무 것도 하지 않는다.<br />
*/<br />
if (<br />
window.CLBI &&<br />
window.CLBI.categoryNav &&<br />
typeof window.CLBI.categoryNav.init === 'function'<br />
) {<br />
window.CLBI.categoryNav.init(root || document);<br />
}<br />
}<br />
<br />
function removeLegacyMainPageHero() {<br />
/*<br />
기존 대문 전용 레거시 요소 정리<br />
-----------------------------------------<br />
이전 대문 구조에서는 Common.js가 본문 바깥에 #clbi-main-logo를 직접 삽입하고,<br />
본문 안의 #clbi-main-crt-hero를 #clbi-main-crt-hero-wrap으로 감싸서<br />
.liberty-content-main 위쪽으로 재배치했다.<br />
<br />
새 대문은 본문 내부의 .main-portal이 로고, 알림, 카테고리 네비, 이미지 피드,<br />
방명록, 상태 패널을 모두 담당한다. 따라서 Common.js가 별도 로고나 CRT 래퍼를<br />
삽입하면 새 로고/콘텐츠와 중복된다.<br />
<br />
여기서는 JS가 만들던 바깥 로고와 CRT 래퍼를 제거하고, 예전 대문 원본이나<br />
캐시된 렌더 결과에 남아 있을 수 있는 #clbi-main-crt-hero도 제거한다.<br />
*/<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
}<br />
<br />
function applyMainPageStyle() {<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
if (specialPage === 'Preferences') return;<br />
<br />
var pageName = normalizePageName(mw.config.get('wgPageName'));<br />
var namespaceNumber = mw.config.get('wgNamespaceNumber');<br />
var isMainPage = (pageName === '대문');<br />
var isUserProfilePage = (namespaceNumber === 2);<br />
var isScreenDoc = ($('.screen-header').length > 0);<br />
var isSystemAssetPage = isMediaWikiSystemAssetPage();<br />
var hideTools = (isMainPage || isUserProfilePage || isSystemAssetPage || !canShowContentTools());<br />
<br />
$('body').toggleClass('user-profile-page', isUserProfilePage);<br />
<br />
// 모든 문서에서 분류 바를 본문 컨테이너 아래로 이동<br />
moveCatlinksToBottom();<br />
<br />
if (isMainPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
// 새 대문은 .main-portal 본문 구조가 로고/히어로를 담당한다.<br />
// Common.js의 구식 바깥 로고/CRT 재배치 루틴은 사용하지 않는다.<br />
removeLegacyMainPageHero();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
$('.liberty-content').addClass('content-tools-hidden');<br />
<br />
initCategoryNavIfAvailable(document);<br />
removeSystemDocIndicator();<br />
<br />
} else if (isUserProfilePage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', 'none');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
$('.liberty-content').addClass('content-tools-hidden');<br />
removeSystemDocIndicator();<br />
<br />
} else if (isSystemAssetPage) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-main-crt-hero').remove();<br />
$('#clbi-tools-box').remove();<br />
<br />
$('.content-tools').css('display', 'none');<br />
$('.liberty-content').addClass('content-tools-hidden');<br />
<br />
renderSystemDocIndicator();<br />
<br />
} else if (isScreenDoc) {<br />
$('.liberty-content-header').css('display', 'none');<br />
$('.mw-page-title-main').addClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
<br />
if ($('#clbi-tools-box').length === 0 && canShowContentTools()) {<br />
var $toolsBox = $('<div id="clbi-tools-box" class="clbi-left-box"></div>');<br />
var $toolsTitle = $('<div class="clbi-left-title"><span class="clbi-icon" style="--icon:var(--ic-ui-003)"></span> 관리</div>');<br />
var $toolsContent = $('<div class="clbi-left-content"></div>');<br />
<br />
$toolsContent.append($('.content-tools .btn-group').clone(true));<br />
$toolsBox.append($toolsTitle).append($toolsContent);<br />
$('#clbi-left-sidebar').append($toolsBox);<br />
}<br />
<br />
$('.content-tools').css('display', 'none');<br />
$('.liberty-content').addClass('content-tools-hidden');<br />
removeSystemDocIndicator();<br />
<br />
} else {<br />
$('.liberty-content-header').css('display', '');<br />
$('.mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator').removeClass('clbi-hide');<br />
$('.catlinks').css('display', '');<br />
$('.liberty-content-main').css('border-radius', '0');<br />
<br />
$('#clbi-main-logo').remove();<br />
$('#clbi-main-crt-hero-wrap').remove();<br />
$('#clbi-tools-box').remove();<br />
removeSystemDocIndicator();<br />
}<br />
<br />
if (!isUserProfilePage) {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
}<br />
<br />
if (hideTools) {<br />
$('.content-tools').css('display', 'none');<br />
$('.liberty-content').addClass('content-tools-hidden');<br />
} else if (!isScreenDoc && !isUserProfilePage) {<br />
$('.content-tools').css('display', '');<br />
$('.liberty-content').removeClass('content-tools-hidden');<br />
}<br />
<br />
updateSidebar();<br />
}<br />
<br />
// 본문 기본 목차 제거<br />
function removeNativeTocFromContent() {<br />
$('.liberty-content-main #toc, .liberty-content-main .toc').remove();<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 ID 가져오기<br />
function getHeadingId(heading) {<br />
if (heading.id) {<br />
return heading.id;<br />
}<br />
<br />
var headline = heading.querySelector('.mw-headline[id]');<br />
if (headline && headline.id) {<br />
return headline.id;<br />
}<br />
<br />
return '';<br />
}<br />
<br />
// 왼쪽 목차: MediaWiki 문단 제목 텍스트 가져오기<br />
function getHeadingText(heading) {<br />
var headline = heading.querySelector('.mw-headline');<br />
var source = headline || heading;<br />
var clone = source.cloneNode(true);<br />
<br />
$(clone).find('.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider').remove();<br />
<br />
return (clone.textContent || '')<br />
.replace(/\s+/g, ' ')<br />
.trim();<br />
}<br />
<br />
// 왼쪽 목차: 긴 제목에 자동 스크롤 적용<br />
function initTocTitleScroll(root) {<br />
var $items = root<br />
? $(root).find('.toc-scroll-text')<br />
: $('#side-toc-box .toc-scroll-text');<br />
<br />
$items.each(function () {<br />
var $text = $(this);<br />
var $wrap = $text.closest('.toc-scroll-wrap');<br />
<br />
if (!$wrap.length) return;<br />
<br />
var wrapW = Math.floor($wrap.width());<br />
var textW = Math.ceil(this.scrollWidth);<br />
<br />
// 왼쪽 목차: 레이아웃 계산이 끝나지 않았으면 이번 실행에서는 건드리지 않는다.<br />
if (!wrapW || !textW) return;<br />
<br />
if (textW <= wrapW + 12) {<br />
// 왼쪽 목차: 칸을 넘지 않는 제목은 전체 텍스트를 그대로 보여준다.<br />
$wrap.removeClass('is-scrolling');<br />
<br />
if ($text.data('toc-scroll-enabled')) {<br />
$text.css({<br />
animation: '',<br />
'animation-delay': '',<br />
'--scroll-dist': ''<br />
});<br />
$text.removeData('toc-scroll-enabled');<br />
$text.removeData('toc-scroll-key');<br />
}<br />
<br />
return;<br />
}<br />
<br />
var scrollDist = '-' + (textW - wrapW + 10) + 'px';<br />
var duration = Math.max(7, textW / 38) * 1.25;<br />
var scrollKey = scrollDist + '|' + duration;<br />
<br />
// 왼쪽 목차: 긴 제목에는 오른쪽 페이드와 스크롤을 적용한다.<br />
$wrap.addClass('is-scrolling');<br />
<br />
// 왼쪽 목차: 같은 값으로 이미 적용된 애니메이션은 다시 초기화하지 않는다.<br />
if ($text.data('toc-scroll-key') === scrollKey) {<br />
return;<br />
}<br />
<br />
$text.data('toc-scroll-enabled', true);<br />
$text.data('toc-scroll-key', scrollKey);<br />
<br />
$text.css({<br />
// 왼쪽 목차: 페이지 진입 직후에는 잠시 읽을 시간을 준 뒤 흐르게 한다.<br />
animation: 'toc-scroll-blink-reset ' + duration + 's linear infinite',<br />
'animation-delay': '1s',<br />
'--scroll-dist': scrollDist<br />
});<br />
});<br />
}<br />
<br />
// 목차를 왼쪽 사이드바에 새로 생성<br />
function moveTocToLeftSidebar() {<br />
// 왼쪽 목차: MediaWiki가 만든 원래 목차는 본문에서 제거한다.<br />
removeNativeTocFromContent();<br />
<br />
var leftSidebar = document.getElementById('clbi-left-sidebar');<br />
if (!leftSidebar) return;<br />
<br />
var content =<br />
document.querySelector('.liberty-content-main .mw-parser-output') ||<br />
document.querySelector('.liberty-content-main');<br />
<br />
if (!content) return;<br />
<br />
var headings = Array.prototype.slice.call(<br />
content.querySelectorAll('h2, h3')<br />
).filter(function (heading) {<br />
if (heading.closest('#toc, .toc, #side-toc-box')) return false;<br />
<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
<br />
if (!id || !text) return false;<br />
<br />
return true;<br />
});<br />
<br />
var tocKey = headings.map(function (heading) {<br />
return getHeadingId(heading) + '|' + getHeadingText(heading);<br />
}).join('||');<br />
<br />
var existingBox = document.getElementById('side-toc-box');<br />
<br />
// 왼쪽 목차: 같은 문서에서 같은 목차를 이미 만들었다면 다시 지우고 만들지 않는다.<br />
if (existingBox && existingBox.getAttribute('data-toc-key') === tocKey) {<br />
initTocTitleScroll(existingBox);<br />
return;<br />
}<br />
<br />
if (existingBox) {<br />
existingBox.remove();<br />
}<br />
<br />
if (!headings.length) return;<br />
<br />
var tocBox = document.createElement('div');<br />
tocBox.className = 'clbi-left-box';<br />
tocBox.id = 'side-toc-box';<br />
tocBox.setAttribute('data-toc-key', tocKey);<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-left-title';<br />
<br />
// 왼쪽 목차: 박스 제목은 Lang.js의 현재 UI 언어를 따른다.<br />
var currentLang = getCurrentLang();<br />
var t = (window.LANG && window.LANG[currentLang]) ? window.LANG[currentLang] : window.LANG.ko;<br />
var tocTitleText = (t && t.toc) ? t.toc : '목차';<br />
<br />
title.innerHTML =<br />
'<span class="sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_LIST + '</span> ' + tocTitleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-left-content toc-sidebar-content';<br />
<br />
var list = document.createElement('ul');<br />
list.className = 'generated-toc';<br />
<br />
headings.forEach(function (heading) {<br />
var id = getHeadingId(heading);<br />
var text = getHeadingText(heading);<br />
var level = heading.tagName.toLowerCase() === 'h3' ? 3 : 2;<br />
<br />
var item = document.createElement('li');<br />
item.className = 'toc-level-' + level;<br />
<br />
var link = document.createElement('a');<br />
link.setAttribute('href', '#' + id);<br />
<br />
// 왼쪽 목차: 긴 제목 스크롤을 위해 텍스트를 별도 span으로 감싼다.<br />
var textWrap = document.createElement('span');<br />
textWrap.className = 'toc-scroll-wrap';<br />
<br />
var textSpan = document.createElement('span');<br />
textSpan.className = 'toc-scroll-text';<br />
textSpan.textContent = text;<br />
<br />
textWrap.appendChild(textSpan);<br />
link.appendChild(textWrap);<br />
<br />
item.appendChild(link);<br />
list.appendChild(item);<br />
});<br />
<br />
body.appendChild(list);<br />
tocBox.appendChild(title);<br />
tocBox.appendChild(body);<br />
leftSidebar.appendChild(tocBox);<br />
<br />
// 왼쪽 목차: DOM 배치가 끝난 뒤 긴 제목 스크롤 여부를 계산한다.<br />
requestAnimationFrame(function () {<br />
initTocTitleScroll(tocBox);<br />
<br />
setTimeout(function () {<br />
initTocTitleScroll(tocBox);<br />
}, 120);<br />
});<br />
}<br />
<br />
<br />
// 우측 광고판: 이미지/번역 캡션 목록<br />
var RIGHT_BILLBOARD_ITEMS = [<br />
{<br />
file: 'Side-visual-001.png',<br />
alt: 'PROOF TO THE WORLD / YOU ONCE PART OF IT',<br />
duration: 3000,<br />
caption: [<br />
'"당신이 한때 이 세계의',<br />
'',<br />
'일부였다는 것을 증명하십시오"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-003.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
},<br />
{<br />
file: 'Side-visual-002.png',<br />
alt: 'APPLY NOW',<br />
duration: 1000,<br />
caption: [<br />
'"지금 지원하세요!"'<br />
]<br />
}<br />
];<br />
<br />
function getRightBillboardItem(index) {<br />
var items = RIGHT_BILLBOARD_ITEMS;<br />
<br />
if (!items || !items.length) {<br />
return {<br />
file: 'Side-visual-001.png',<br />
alt: '',<br />
caption: []<br />
};<br />
}<br />
<br />
var normalized = index % items.length;<br />
if (normalized < 0) normalized += items.length;<br />
<br />
return items[normalized];<br />
}<br />
<br />
function getRightBillboardImageUrl(fileName) {<br />
return '/index.php?title=특수:Redirect/file/' + encodeURIComponent(fileName || 'Side-visual-001.png');<br />
}<br />
<br />
function getRightBillboardCaptionHtml(item) {<br />
var lines = item && item.caption ? item.caption : [];<br />
var html = '';<br />
<br />
function escapeCaptionText(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/\"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
lines.forEach(function(line) {<br />
var text = String(line == null ? '' : line);<br />
var isGap = !text.trim();<br />
var className = 'right-billboard-caption-line' + (isGap ? ' is-gap' : '');<br />
html += '<span class="' + className + '">' + (isGap ? '&nbsp;' : escapeCaptionText(text)) + '</span>';<br />
});<br />
<br />
return html;<br />
}<br />
<br />
function setRightBillboardItem(index) {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box) return;<br />
<br />
var item = getRightBillboardItem(index);<br />
var src = getRightBillboardImageUrl(item.file);<br />
var images = box.querySelectorAll('.right-billboard-image');<br />
var caption = box.querySelector('#right-billboard-caption');<br />
var emptySub = box.querySelector('.right-billboard-empty-sub');<br />
<br />
box.setAttribute('data-billboard-index', String(index));<br />
box.classList.remove('is-empty');<br />
<br />
Array.prototype.forEach.call(images, function(img) {<br />
img.style.display = '';<br />
img.setAttribute('src', src);<br />
img.setAttribute('alt', img.classList.contains('right-billboard-image-base') ? (item.alt || '') : '');<br />
});<br />
<br />
if (caption) {<br />
caption.innerHTML = getRightBillboardCaptionHtml(item);<br />
}<br />
<br />
if (emptySub) {<br />
emptySub.textContent = item.file || 'Side-visual-001.png';<br />
}<br />
}<br />
<br />
function getRightBillboardItemDuration(item) {<br />
var duration = item && item.duration ? parseInt(item.duration, 10) : 3000;<br />
<br />
if (Number.isNaN(duration) || duration < 500) {<br />
duration = 3000;<br />
}<br />
<br />
return duration;<br />
}<br />
<br />
function initRightBillboardCarousel() {<br />
var box = document.querySelector('.right-billboard-box');<br />
if (!box || box.getAttribute('data-billboard-ready') === '1') return;<br />
<br />
box.setAttribute('data-billboard-ready', '1');<br />
box.setAttribute('data-billboard-index', '0');<br />
<br />
setRightBillboardItem(0);<br />
<br />
if (!RIGHT_BILLBOARD_ITEMS || RIGHT_BILLBOARD_ITEMS.length <= 1) return;<br />
<br />
function scheduleNext() {<br />
var current = parseInt(box.getAttribute('data-billboard-index') || '0', 10);<br />
if (Number.isNaN(current)) current = 0;<br />
<br />
var currentItem = getRightBillboardItem(current);<br />
var delay = getRightBillboardItemDuration(currentItem);<br />
<br />
window.setTimeout(function() {<br />
if (!document.body.contains(box)) return;<br />
<br />
if (!document.hidden) {<br />
setRightBillboardItem(current + 1);<br />
}<br />
<br />
scheduleNext();<br />
}, delay);<br />
}<br />
<br />
scheduleNext();<br />
}<br />
<br />
<br />
function escapeRightBillboardAttr(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
function buildRightBillboardBox() {<br />
var billboardInitial = getRightBillboardItem(0);<br />
var billboardSrc = getRightBillboardImageUrl(billboardInitial.file);<br />
<br />
return '' +<br />
'<div class="clbi-right-box right-billboard-box" data-billboard-index="0">' +<br />
'<div class="clbi-right-title right-billboard-title">' +<br />
'<span class="right-billboard-title-text"><span class="right-billboard-title-main">Ad</span><span class="right-billboard-title-note">(not really)</span></span>' +<br />
'</div>' +<br />
'<div class="right-billboard-body">' +<br />
'<div class="right-billboard-recess">' +<br />
'<div class="right-billboard-screen">' +<br />
'<img id="right-billboard-image" class="right-billboard-image right-billboard-image-base" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="' + escapeRightBillboardAttr(billboardInitial.alt || '') + '" onload="var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.remove(\'is-empty\');}" onerror="this.onerror=null;this.style.display=\'none\';var b=this.closest(\'.right-billboard-box\'); if(b){b.classList.add(\'is-empty\');}">' +<br />
'<img class="right-billboard-image right-billboard-image-bloom" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-a" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-b" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<img class="right-billboard-image right-billboard-slice right-billboard-slice-c" src="' + escapeRightBillboardAttr(billboardSrc) + '" alt="" aria-hidden="true" onerror="this.onerror=null;this.style.display=\'none\';">' +<br />
'<div class="right-billboard-glitch" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-tear" aria-hidden="true"></div>' +<br />
'<div class="right-billboard-empty" aria-hidden="true">' +<br />
'<span class="right-billboard-empty-main">SIGNAL EMPTY</span>' +<br />
'<span class="right-billboard-empty-sub">' + escapeRightBillboardAttr(billboardInitial.file || 'Side-visual-001.png') + '</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div id="right-billboard-caption" class="right-billboard-caption" aria-hidden="true">' + getRightBillboardCaptionHtml(billboardInitial) + '</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
function buildSiteInformationBox() {<br />
return '' +<br />
'<div class="clbi-right-box site-info-sidebar">' +<br />
'<div class="clbi-right-title site-info-title">' +<br />
'<span>SITE INFORMATION</span>' +<br />
'<span class="site-info-title-meta">LINKS</span>' +<br />
'</div>' +<br />
'<div class="clbi-right-content site-info-content">' +<br />
'<div class="policy-list">' +<br />
'<div class="policy-row"><a href="/index.php/개인정보처리방침">개인정보처리방침</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/면책_조항">면책 조항</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/라이선스">라이선스</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'<div class="policy-row"><a href="/index.php/크레딧">크레딧</a><span class="policy-mark" aria-hidden="true">›</span></div>' +<br />
'</div>' +<br />
'<div class="social-strip">' +<br />
'<span class="social-icon"><a href="https://discord.gg/ctaeJ9d3Q5" target="_blank" rel="noopener noreferrer">DC</a></span>' +<br />
'<span class="social-icon"><a href="https://www.youtube.com/@nxdsxn" target="_blank" rel="noopener noreferrer">YT</a></span>' +<br />
'<span class="social-icon"><a href="https://x.com/nxd_sxn" target="_blank" rel="noopener noreferrer">X</a></span>' +<br />
'<span class="social-icon"><a href="/index.php/프로젝트:소개">WIP:</a></span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
<br />
<br />
// 초기화 함수<br />
function initSidebars() {<br />
var header = $('.liberty-content-header');<br />
var content = $('.liberty-content');<br />
<br />
if (header.length && content.length) {<br />
header.prependTo(content);<br />
}<br />
<br />
if ($('#clbi-right-sidebar').length === 0) {<br />
var username = mw.config.get('wgUserName');<br />
var isLoggedIn = username !== null;<br />
var avatarSrc = isLoggedIn<br />
? '/index.php?title=특수:Redirect/file/Pfp-' + username + '.png'<br />
: '/index.php?title=특수:Redirect/file/Pfp-default.png';<br />
<br />
var userBox;<br />
<br />
if (isLoggedIn) {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'/index.php?title=특수:Redirect/file/Pfp-default.png\';">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row">' +<br />
'<a href="/index.php/사용자:' + username + '" id="clbi-user-name">' + username + '</a>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<div class="profile-quick-actions" aria-label="프로필 빠른 메뉴">' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-inventory" aria-label="인벤토리"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_PACKAGE + '</span><span class="profile-quick-tip" aria-hidden="true">인벤토리</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-achievements" aria-label="업적"><span class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_TROPHY + '</span><span class="profile-quick-tip" aria-hidden="true">업적</span></button>' +<br />
'<button type="button" class="profile-quick-btn" id="profile-quick-notifications" aria-label="알림"><span id="profile-quick-notification-icon" class="profile-quick-icon" aria-hidden="true">' + CLBI_SVG_BELL + '</span><span class="profile-quick-tip" aria-hidden="true">알림</span></button>' +<br />
'</div>' +<br />
'<a href="/index.php/특수:기여/' + username + '" class="clbi-user-btn" id="clbi-btn-contribution"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_TEXT + '</span><span class="profile-action-label">기여</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:주시문서목록" class="clbi-user-btn" id="clbi-btn-watchlist"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SCAN_EYE + '</span><span class="profile-action-label">주시문서 목록</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php/특수:설정" class="clbi-user-btn" id="clbi-btn-preferences"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_SETTINGS + '</span><span class="profile-action-label">설정</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'<a href="/index.php?title=특수:로그아웃&returnto=대문" class="clbi-user-btn clbi-user-btn-logout" id="clbi-btn-logout"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그아웃</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
} else {<br />
userBox =<br />
'<div class="clbi-right-box profile-card-box">' +<br />
'<div id="clbi-user-avatar-wrap" class="profile-identity-panel">' +<br />
'<div class="profile-avatar-stage">' +<br />
'<img id="clbi-user-avatar" src="/index.php?title=특수:Redirect/file/Pfp-default.png">' +<br />
'</div>' +<br />
'<div id="clbi-user-name-row" class="profile-name-row profile-name-row-guest">' +<br />
'<span id="clbi-user-name">Guest</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-right-content profile-action-box">' +<br />
'<a href="/index.php?title=특수:로그인&returnto=대문" class="clbi-user-btn" id="clbi-btn-login"><span class="profile-action-icon" aria-hidden="true">' + CLBI_SVG_POWER + '</span><span class="profile-action-label">로그인</span><i class="hn hn-angle-right-solid profile-action-arrow" aria-hidden="true"></i></a>' +<br />
'</div>' +<br />
'</div>';<br />
}<br />
var rightVisualBox = '';<br />
var siteInformationBox = '';<br />
<br />
try {<br />
rightVisualBox = buildRightBillboardBox();<br />
} catch (err) {<br />
console.error('Right billboard build failed:', err);<br />
rightVisualBox = '';<br />
}<br />
<br />
try {<br />
siteInformationBox = buildSiteInformationBox();<br />
} catch (err) {<br />
console.error('Site information build failed:', err);<br />
siteInformationBox = '';<br />
}<br />
<br />
<br />
var sidebar = userBox + rightVisualBox + siteInformationBox;<br />
<br />
$('.content-wrapper').append('<div id="clbi-right-sidebar">' + sidebar + '</div>');<br />
}<br />
<br />
<br />
if ($('#clbi-left-sidebar').length === 0) {<br />
var leftSidebar =<br />
'<div id="clbi-left-sidebar">' +<br />
'<div class="clbi-left-box clbi-left-lang-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="sidebar-title-svg clbi-left-language-icon" aria-hidden="true">' + CLBI_SVG_LANGUAGES + '</span> ' +<br />
'<span id="clbi-title-left-language">언어</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content sidebar-lang-box">' +<br />
'<div id="clbi-sidebar-lang-selector" class="sidebar-lang-selector sidebar-lang-dial" tabindex="0" role="group" aria-label="언어 선택">' +<br />
'<div id="clbi-sidebar-lang-dial-stage" class="sidebar-lang-dial-stage">' +<br />
'<div id="clbi-sidebar-lang-fan" class="sidebar-lang-fan" aria-hidden="true"></div>' +<br />
'<div id="clbi-sidebar-lang-selected-panel" class="sidebar-lang-status-panel sidebar-lang-status-left" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-selected-value" class="sidebar-lang-status-value">한국어</span>' +<br />
'</div>' +<br />
'<div id="clbi-sidebar-lang-availability-panel" class="sidebar-lang-status-panel sidebar-lang-status-right is-current" aria-hidden="true">' +<br />
'<span id="clbi-sidebar-lang-availability-value" class="sidebar-lang-status-value">CURRENT</span>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-sidebar-lang-apply" class="sidebar-lang-apply" aria-label="언어 적용">' +<br />
'<span class="sidebar-lang-apply-mark" aria-hidden="true">✓</span>' +<br />
'</button>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="clbi-left-box clbi-left-news-box">' +<br />
'<div class="clbi-left-title">' +<br />
'<span class="news-title-icon sidebar-title-svg" aria-hidden="true">' + CLBI_SVG_NEWSPAPER + '</span> ' +<br />
'<span id="clbi-title-left-news">뉴스</span>' +<br />
'</div>' +<br />
'<div class="clbi-left-content clbi-news-box">' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-changelog-title">CHANGELOG</div>' +<br />
'<div class="news-left-changelog-feed">' +<br />
'<a href="/index.php/체인지로그" class="news-post-item">' +<br />
'<div class="news-post-title-wrap">' +<br />
'<span class="news-post-title" id="clbi-left-news-changelog-main">체인지로그</span>' +<br />
'<i class="hn hn-angle-right-solid news-post-arrow" aria-hidden="true"></i>' +<br />
'</div>' +<br />
'<span class="news-post-tag">POST</span>' +<br />
'</a>' +<br />
'</div>' +<br />
<br />
'<div class="news-divider"></div>' +<br />
<br />
'<div class="news-feed-title" id="clbi-left-news-recent-title">RECENT CHANGES</div>' +<br />
'<div class="news-left-recent-feed" id="clbi-left-recent-list">불러오는 중...</div>' +<br />
<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.content-wrapper').prepend(leftSidebar);<br />
<br />
renderSidebarLanguageBox();<br />
loadRecentChangesList('#clbi-left-recent-list', 10);<br />
updateLeftSidebarNationsImage();<br />
}<br />
<br />
try {<br />
initRightBillboardCarousel();<br />
} catch (err) {<br />
console.error('Right billboard carousel failed:', err);<br />
}<br />
<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('initSidebars');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
setTimeout(function() {<br />
initNotifications();<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
}, 300);<br />
<br />
setTimeout(moveTocToLeftSidebar, 800);<br />
setTimeout(moveTocToLeftSidebar, 1500);<br />
});<br />
}<br />
<br />
$(function() {<br />
loadLangScript(function() {<br />
setTimeout(function() {<br />
initSidebars();<br />
}, 100);<br />
});<br />
});<br />
<br />
$(document).on('click.profileQuickPlaceholder', '#profile-quick-inventory, #profile-quick-achievements', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
});<br />
<br />
// SPA 네비게이션<br />
function shouldSkip(url) {<br />
return url.match(/action=edit|action=submit|action=history|action=delete|action=protect|action=purge|특수:로그인|특수:로그아웃|Special:UserLogin|Special:UserLogout|특수:사용자정보|특수:비밀번호바꾸기|uselang=/);<br />
}<br />
<br />
$(function() {<br />
if (window._spaInitialized) return;<br />
window._spaInitialized = true;<br />
<br />
function isInternal(url) {<br />
var a = document.createElement('a');<br />
a.href = url;<br />
return a.hostname === window.location.hostname;<br />
}<br />
<br />
function loadPage(url) {<br />
invalidateProfileRender();<br />
<br />
fetch(url)<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var scripts = doc.querySelectorAll('script');<br />
for (var i = 0; i < scripts.length; i++) {<br />
var src = scripts[i].textContent;<br />
<br />
if (src.indexOf('wgNamespaceNumber') !== -1) {<br />
var match = src.match(/"wgNamespaceNumber":(-?\d+)/);<br />
if (match) mw.config.set('wgNamespaceNumber', parseInt(match[1], 10));<br />
<br />
var matchTitle = src.match(/"wgTitle":"([^"]+)"/);<br />
if (matchTitle) mw.config.set('wgTitle', matchTitle[1]);<br />
<br />
var matchPage = src.match(/"wgPageName":"([^"]+)"/);<br />
if (matchPage) mw.config.set('wgPageName', matchPage[1]);<br />
<br />
var matchArticle = src.match(/"wgArticleId":(\d+)/);<br />
if (matchArticle) {<br />
mw.config.set('wgArticleId', parseInt(matchArticle[1], 10));<br />
} else {<br />
mw.config.set('wgArticleId', 0);<br />
}<br />
<br />
var matchIsMainPage = src.match(/"wgIsMainPage":(true|false)/);<br />
if (matchIsMainPage) {<br />
mw.config.set('wgIsMainPage', matchIsMainPage[1] === 'true');<br />
} else {<br />
mw.config.set('wgIsMainPage', false);<br />
}<br />
<br />
var matchSpecial = src.match(/"wgCanonicalSpecialPageName":"([^"]+)"/);<br />
if (matchSpecial) {<br />
mw.config.set('wgCanonicalSpecialPageName', matchSpecial[1]);<br />
} else {<br />
mw.config.set('wgCanonicalSpecialPageName', false);<br />
}<br />
break;<br />
}<br />
}<br />
<br />
var newContent = doc.querySelector('.liberty-content-main');<br />
var newTitle = doc.querySelector('.mw-page-title-main');<br />
var newHead = doc.querySelector('title');<br />
var newHeader = doc.querySelector('.liberty-content-header');<br />
<br />
if (newContent) {<br />
$('#side-toc-box').remove();<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
$('.liberty-content-main').html(newContent.innerHTML);<br />
$('.profile-card').remove();<br />
$('body').removeClass('page-loading');<br />
}<br />
<br />
if (newTitle) {<br />
$('.mw-page-title-main').html(newTitle.innerHTML);<br />
}<br />
<br />
if (newHead) {<br />
document.title = newHead.textContent;<br />
}<br />
<br />
if (newHeader) {<br />
$('.liberty-content-header').html(newHeader.innerHTML);<br />
}<br />
<br />
window.scrollTo(0, 0);<br />
mw.hook('wikipage.content').fire($('.liberty-content-main'));<br />
applyMainPageStyle();<br />
initCategoryNavIfAvailable(document);<br />
<br />
if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.handleSpaPageView === 'function') {<br />
window.ProgressSystemWebUi.handleSpaPageView();<br />
} else if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.boot === 'function') {<br />
window.ProgressSystemWebUi.boot('spa');<br />
}<br />
<br />
$('#side-toc-box').remove();<br />
setTimeout(moveTocToLeftSidebar, 100);<br />
setTimeout(moveTocToLeftSidebar, 500);<br />
setTimeout(moveTocToLeftSidebar, 1200);<br />
<br />
mw.loader.using(['mediawiki.api']).then(function() {<br />
initProfile();<br />
moveTocToLeftSidebar();<br />
});<br />
});<br />
}<br />
<br />
// 목차 링크는 전용 처리<br />
$(document).on('click', '#side-toc-box a, #toc a, .toc a', function(e) {<br />
var href = $(this).attr('href');<br />
if (!href || href.charAt(0) !== '#') return;<br />
<br />
var rawId = href.slice(1);<br />
if (!rawId) return;<br />
<br />
var decodedId = rawId;<br />
<br />
try {<br />
decodedId = decodeURIComponent(rawId);<br />
} catch (err) {<br />
decodedId = rawId;<br />
}<br />
<br />
var target = document.getElementById(decodedId);<br />
<br />
if (!target && window.CSS && CSS.escape) {<br />
target = document.querySelector('#' + CSS.escape(decodedId));<br />
}<br />
<br />
if (!target) return;<br />
<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var scrollTarget = target.closest('h2, h3') || target;<br />
<br />
scrollTarget.scrollIntoView({<br />
behavior: 'auto',<br />
block: 'start'<br />
});<br />
<br />
history.replaceState(null, '', '#' + rawId);<br />
});<br />
<br />
$(document).on('click', 'a', function(e) {<br />
// 휠 클릭, 새 탭 열기, 보조키 이동은 브라우저 기본 동작을 유지한다.<br />
if (e.which && e.which !== 1) return;<br />
if (e.button && e.button !== 0) return;<br />
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;<br />
<br />
var href = $(this).attr('href');<br />
if (!href) return;<br />
<br />
// 목차 링크는 별도 핸들러에서 처리<br />
if ($(this).closest('#side-toc-box, #toc, .toc').length) return;<br />
<br />
// 단순 해시 링크는 SPA 가로채기 제외<br />
if (href.startsWith('#')) return;<br />
<br />
var link = document.createElement('a');<br />
link.href = href;<br />
<br />
var samePath = decodeURIComponent(link.pathname) === decodeURIComponent(window.location.pathname);<br />
var sameSearch = (link.search || '') === (window.location.search || '');<br />
<br />
if (link.hash && samePath && sameSearch) return;<br />
<br />
var currentBase = window.location.href.split('#')[0];<br />
var targetBase = link.href.split('#')[0];<br />
<br />
if (link.hash && currentBase === targetBase) return;<br />
<br />
if (!isInternal(href)) return;<br />
if (shouldSkip(href)) return;<br />
<br />
e.preventDefault();<br />
playStaticSound();<br />
$('body').addClass('page-loading');<br />
history.pushState(null, '', href);<br />
loadPage(href);<br />
});<br />
<br />
window.addEventListener('popstate', function() {<br />
loadPage(window.location.href);<br />
});<br />
});<br />
<br />
// 시간 계산 함수<br />
function timeAgo(timestamp) {<br />
var now = new Date();<br />
var date = new Date(timestamp);<br />
var diff = Math.floor((now - date) / 1000);<br />
<br />
if (diff < 60) return diff + '초 전';<br />
if (diff < 3600) return Math.floor(diff / 60) + '분 전';<br />
if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';<br />
return Math.floor(diff / 86400) + '일 전';<br />
}<br />
<br />
// 펼접 토글<br />
// 펼접 토글<br />
function getFoldTexts() {<br />
var lang = getCurrentLang();<br />
return (window.LANG && window.LANG[lang])<br />
? window.LANG[lang]<br />
: (window.LANG ? window.LANG.ko : { expand: '펼치기', collapse: '접기' });<br />
}<br />
<br />
function refreshOpenAncestors($start) {<br />
$start.parents('[id^="collapsible"]').each(function () {<br />
var $parent = $(this);<br />
if (!$parent.hasClass('folding-open')) return;<br />
<br />
// 이미 fully open 상태면 굳이 다시 잠그지 않음<br />
if ($parent.data('fold-state') === 'open') {<br />
return;<br />
}<br />
<br />
$parent.css('max-height', this.scrollHeight + 'px');<br />
});<br />
}<br />
<br />
function bindInnerResizeUpdates($target) {<br />
// 이미지 늦게 로드될 때 높이 갱신<br />
$target.find('img').off('.foldimg').on('load.foldimg', function () {<br />
if ($target.hasClass('folding-open')) {<br />
if ($target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
}<br />
<br />
function openFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
$target.data('fold-state', 'opening');<br />
$target.addClass('folding-open');<br />
<br />
// 열린 뒤 자연 확장 가능하게 만들기 위해 먼저 px로 열기<br />
$target.css('max-height', '0px');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
<br />
$btn.text(t.collapse);<br />
<br />
bindInnerResizeUpdates($target);<br />
<br />
// 바깥 펼접 즉시 갱신<br />
refreshOpenAncestors($target);<br />
<br />
// 전환 끝나면 none으로 풀어서 중첩 펼접/동적 내용 증가를 자연스럽게 허용<br />
$target.off('transitionend.foldopen').on('transitionend.foldopen', function (e) {<br />
if (e.target !== this) return;<br />
if (!$target.hasClass('folding-open')) return;<br />
<br />
$target.css('max-height', 'none');<br />
$target.data('fold-state', 'open');<br />
<br />
refreshOpenAncestors($target);<br />
});<br />
<br />
// 늦게 렌더되는 콘텐츠 대응<br />
requestAnimationFrame(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
});<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 80);<br />
<br />
setTimeout(function () {<br />
if ($target.hasClass('folding-open') && $target.data('fold-state') !== 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
refreshOpenAncestors($target);<br />
}<br />
}, 220);<br />
}<br />
<br />
function closeFold($target, $btn) {<br />
var t = getFoldTexts();<br />
<br />
// none 상태에서 닫으면 transition이 안 되므로 실제 높이로 고정<br />
if ($target.css('max-height') === 'none' || $target.data('fold-state') === 'open') {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
} else {<br />
$target.css('max-height', $target[0].scrollHeight + 'px');<br />
}<br />
<br />
$target.data('fold-state', 'closing');<br />
$target[0].offsetHeight;<br />
$target.css('max-height', '0px');<br />
$target.removeClass('folding-open');<br />
<br />
$btn.text(t.expand);<br />
<br />
refreshOpenAncestors($target);<br />
<br />
setTimeout(function () {<br />
refreshOpenAncestors($target);<br />
$target.data('fold-state', 'closed');<br />
}, 250);<br />
}<br />
<br />
$(function () {<br />
$(document)<br />
.off('click.clbiToggle')<br />
.on('click.clbiToggle', '.toggleBtn', function () {<br />
var $btn = $(this);<br />
var targetId = $btn.data('target');<br />
var $target = $('#' + targetId);<br />
if (!$target.length) return;<br />
<br />
var scrollY = window.scrollY;<br />
<br />
if ($target.hasClass('folding-open')) {<br />
closeFold($target, $btn);<br />
} else {<br />
openFold($target, $btn);<br />
}<br />
<br />
window.scrollTo(0, scrollY);<br />
});<br />
});<br />
<br />
// ========== 프로필 시스템 ==========<br />
function initProfile() {<br />
$('.profile-card').remove();<br />
$('.user-profile-portal').removeClass('user-profile-portal');<br />
<br />
var token = ++PROFILE_RENDER_TOKEN;<br />
var ns = mw.config.get('wgNamespaceNumber');<br />
var title = mw.config.get('wgTitle');<br />
var specialPage = mw.config.get('wgCanonicalSpecialPageName');<br />
var isProfileSettings = specialPage === '사용자정보';<br />
<br />
$('body').toggleClass('user-profile-page', ns === 2);<br />
$('body').toggleClass('user-profile-settings-page', isProfileSettings);<br />
<br />
if (ns === 2) {<br />
var profileUser = title.split('/')[0];<br />
renderProfile(profileUser, token);<br />
}<br />
<br />
if (isProfileSettings) {<br />
initUserProfilePage();<br />
}<br />
}<br />
<br />
function renderProfile(username, token) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'query',<br />
list: 'users',<br />
ususers: username,<br />
usprop: 'editcount'<br />
}).then(function(data) {<br />
if (token !== PROFILE_RENDER_TOKEN) return;<br />
if (mw.config.get('wgNamespaceNumber') !== 2) return;<br />
<br />
var currentTitle = String(mw.config.get('wgTitle') || '').split('/')[0];<br />
if (currentTitle !== username) return;<br />
<br />
var user = data.query.users[0];<br />
var contentEl = document.getElementById('mw-content-text');<br />
if (!contentEl) return;<br />
<br />
var pageContent = contentEl.querySelector('.mw-parser-output') || contentEl;<br />
injectProfileCard(username, user, pageContent);<br />
});<br />
}<br />
<br />
function injectProfileCard(username, userData, container) {<br />
var isOwnPage = mw.config.get('wgUserName') === username;<br />
var editCount = (userData && userData.editcount) ? userData.editcount : 0;<br />
<br />
function escapeHtml(value) {<br />
return String(value == null ? '' : value)<br />
.replace(/&/g, '&amp;')<br />
.replace(/</g, '&lt;')<br />
.replace(/>/g, '&gt;')<br />
.replace(/"/g, '&quot;')<br />
.replace(/'/g, '&#039;');<br />
}<br />
<br />
container.classList.add('user-profile-portal');<br />
<br />
var safeUsername = escapeHtml(username);<br />
var avatarSrc = '/index.php?title=특수:Redirect/file/Pfp-' + encodeURIComponent(username) + '.png&width=220';<br />
var fallbackSrc = '/index.php?title=특수:Redirect/file/Pfp-default.png&width=220';<br />
var editBtn = isOwnPage<br />
? '<a href="/index.php/특수:사용자정보" class="profile-edit-btn"><span class="profile-edit-label">프로필 수정</span><span class="profile-edit-arrow">›</span></a>'<br />
: '';<br />
<br />
var progressHtml = isOwnPage<br />
? '<div class="profile-page-progress is-syncing" data-profile-progress>' +<br />
'<div class="profile-section-title">LEVEL RECORD</div>' +<br />
'<div class="profile-page-progress-body">' +<br />
'<div class="profile-page-progress-row">' +<br />
'<span class="profile-page-level">SYNC</span>' +<br />
'<span class="profile-page-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="profile-page-xp-bar" aria-hidden="true"><div class="profile-page-xp-fill"></div></div>' +<br />
'<div class="profile-page-progress-sub">SYNCING</div>' +<br />
'<div class="profile-page-progress-meta">TODAY — · DISCOVERED —</div>' +<br />
'</div>' +<br />
'</div>'<br />
: '';<br />
<br />
var card = document.createElement('div');<br />
card.className = 'profile-card profile-page-console';<br />
card.innerHTML =<br />
'<div class="profile-card-titlebar">' +<br />
'<span>USER PROFILE</span>' +<br />
'<span>OFFICIAL ARCHIVE</span>' +<br />
'</div>' +<br />
'<div class="profile-card-body">' +<br />
'<div class="profile-identity-row">' +<br />
'<div class="profile-avatar-bay">' +<br />
'<img src="' + avatarSrc + '" onerror="this.onerror=null;this.src=\'' + fallbackSrc + '\';" alt="' + safeUsername + '">' +<br />
'</div>' +<br />
'<div class="profile-info-panel">' +<br />
'<div class="profile-nameplate">' +<br />
'<h2 class="profile-username">' + safeUsername + '</h2>' +<br />
editBtn +<br />
'</div>' +<br />
'<div class="profile-name" data-field="name"></div>' +<br />
'<div class="profile-role" data-field="role"></div>' +<br />
'<div class="profile-discord" data-field="discord"></div>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-lower-grid">' +<br />
'<div class="profile-bio-panel">' +<br />
'<div class="profile-section-title">BIOGRAPHY</div>' +<br />
'<div class="profile-bio" data-field="bio"></div>' +<br />
'</div>' +<br />
'<div class="profile-stats-panel">' +<br />
'<div class="profile-section-title">RECORD</div>' +<br />
'<div class="profile-stats">' +<br />
progressHtml +<br />
'<div class="profile-stat-grid">' +<br />
'<div class="profile-stat">' +<br />
'<span class="clbi-stat-value">' + editCount + '</span>' +<br />
'<span class="clbi-stat-label">수정 횟수</span>' +<br />
'</div>' +<br />
'<div class="profile-stat" data-contrib-pages-stat>' +<br />
'<span class="clbi-stat-value" data-contrib-pages-value>SYNC</span>' +<br />
'<span class="clbi-stat-label">기여 문서</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'<div class="profile-info-grid">' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">TIME</span>' +<br />
'<span class="profile-info-value" data-profile-time>UTC --:--</span>' +<br />
'</div>' +<br />
'<div class="profile-info-stat">' +<br />
'<span class="profile-info-label">LANGUAGE</span>' +<br />
'<span class="profile-info-value" data-profile-language>—</span>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
$('.profile-card').remove();<br />
container.insertBefore(card, container.firstChild);<br />
loadProfileFields(username, card);<br />
loadProfileContributionPages(username, card);<br />
updateProfilePageEnvironment(card, null);<br />
<br />
if (isOwnPage) {<br />
loadProfileProgressForUserPage(card);<br />
}<br />
}<br />
<br />
function getProfileLanguageLabel() {<br />
var lang = getCurrentLang();<br />
return SIDEBAR_LANGUAGE_LABELS[lang] || (lang ? lang.toUpperCase() : '—');<br />
}<br />
<br />
function updateProfilePageEnvironment(card, summary) {<br />
if (!card) return;<br />
<br />
var timezone = summary && summary.timezone ? summary.timezone : 'UTC';<br />
var timeEl = card.querySelector('[data-profile-time]');<br />
var langEl = card.querySelector('[data-profile-language]');<br />
<br />
if (timeEl) {<br />
try {<br />
timeEl.textContent = timezone + ' ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: timezone<br />
}).format(new Date());<br />
} catch (err) {<br />
timeEl.textContent = 'UTC ' + new Intl.DateTimeFormat('ko-KR', {<br />
hour: '2-digit',<br />
minute: '2-digit',<br />
hour12: false,<br />
timeZone: 'UTC'<br />
}).format(new Date());<br />
}<br />
}<br />
<br />
if (langEl) {<br />
langEl.textContent = getProfileLanguageLabel();<br />
}<br />
}<br />
<br />
function loadProfileContributionPages(username, card) {<br />
if (!username || !card) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
var valueEl = card.querySelector('[data-contrib-pages-value]');<br />
if (valueEl) valueEl.textContent = 'SYNC';<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
var pages = Object.create(null);<br />
var cont = {};<br />
var guard = 0;<br />
<br />
function requestNext() {<br />
guard++;<br />
<br />
var params = Object.assign({<br />
action: 'query',<br />
list: 'usercontribs',<br />
ucuser: username,<br />
ucnamespace: 0,<br />
ucprop: 'title',<br />
uclimit: 'max',<br />
format: 'json',<br />
formatversion: 2<br />
}, cont);<br />
<br />
return api.get(params).then(function (data) {<br />
var rows = data && data.query && data.query.usercontribs ? data.query.usercontribs : [];<br />
<br />
rows.forEach(function (row) {<br />
if (row && row.title) pages[row.title] = true;<br />
});<br />
<br />
if (data && data.continue && data.continue.uccontinue && guard < 40) {<br />
cont = data.continue;<br />
return requestNext();<br />
}<br />
<br />
if (valueEl) valueEl.textContent = Object.keys(pages).length;<br />
});<br />
}<br />
<br />
requestNext().fail(function () {<br />
if (valueEl) valueEl.textContent = '—';<br />
});<br />
});<br />
}<br />
<br />
function loadProfileProgressForUserPage(card) {<br />
if (!mw.config.get('wgUserName')) return;<br />
if (!mw.loader || typeof mw.loader.using !== 'function') return;<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (!payload || !payload.available || !payload.summary) return;<br />
updateUserPageProgress(card, payload.summary);<br />
updateProfilePageEnvironment(card, payload.summary);<br />
});<br />
});<br />
}<br />
<br />
function updateUserPageProgress(card, summary) {<br />
var panel = card.querySelector('[data-profile-progress]');<br />
if (!panel || !summary) return;<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = Math.max(0, Math.min(100, summary.progressPercent || 0));<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
<br />
panel.classList.remove('is-syncing');<br />
panel.classList.toggle('is-max-level', isMaxLevel);<br />
<br />
var levelEl = panel.querySelector('.profile-page-level');<br />
var totalEl = panel.querySelector('.profile-page-total-xp');<br />
var fillEl = panel.querySelector('.profile-page-xp-fill');<br />
var subEl = panel.querySelector('.profile-page-progress-sub');<br />
var metaEl = panel.querySelector('.profile-page-progress-meta');<br />
<br />
if (levelEl) levelEl.textContent = (isMaxLevel ? 'MAX ' : 'LVL ') + level;<br />
if (totalEl) totalEl.textContent = totalXp + ' XP';<br />
if (fillEl) fillEl.style.width = percent + '%';<br />
if (subEl) subEl.textContent = isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT');<br />
if (metaEl) metaEl.textContent = 'TODAY ' + dailyXp + ' XP · DISCOVERED ' + discoveries;<br />
}<br />
<br />
function loadProfileFields(username, card) {<br />
var api = new mw.Api();<br />
api.get({<br />
action: 'userprofile',<br />
user: username<br />
}).then(function(data) {<br />
var profile = data.userprofile;<br />
updateProfileFields(card, {<br />
name: profile.name || '',<br />
discord: profile.discord || '',<br />
role: profile.role || '',<br />
bio: profile.bio || ''<br />
});<br />
}).fail(function() {<br />
updateProfileFields(card, {<br />
name: '',<br />
discord: '',<br />
role: '',<br />
bio: ''<br />
});<br />
});<br />
}<br />
<br />
function updateProfileFields(card, data) {<br />
var nameEl = card.querySelector('[data-field="name"]');<br />
var roleEl = card.querySelector('[data-field="role"]');<br />
var discordEl = card.querySelector('[data-field="discord"]');<br />
var bioEl = card.querySelector('[data-field="bio"]');<br />
if (nameEl) nameEl.textContent = data.name || '';<br />
if (roleEl) roleEl.textContent = data.role || '';<br />
if (discordEl) discordEl.textContent = data.discord ? ('디스코드: ' + data.discord) : '';<br />
if (bioEl) bioEl.textContent = data.bio || '';<br />
}<br />
// ========== 프로필 시스템 끝 ==========<br />
<br />
// ========== 알림 시스템 ==========<br />
function ensureNotificationPopup() {<br />
if (document.getElementById('clbi-notification-popup')) return;<br />
<br />
var popup = document.createElement('div');<br />
popup.id = 'clbi-notification-popup';<br />
popup.style.cssText =<br />
'display:none;position:fixed;z-index:99999;width:320px;max-height:420px;' +<br />
'background:#0a0909;border:2px solid #854369;border-radius:5px;' +<br />
'box-shadow:0 0 0 1px #1a1a1a, 0 8px 24px rgba(0,0,0,0.55);overflow:hidden;';<br />
<br />
popup.innerHTML =<br />
'<div style="padding:10px 12px;border-bottom:2px solid #854369;background:linear-gradient(to bottom, #171114 0%, #0a0909 100%);color:#E2E2E2;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;">' +<br />
'<span>알림</span>' +<br />
'<button type="button" id="clbi-notification-readall" style="background:#171717;border:1px solid #854369;border-radius:6px;color:#E2E2E2;font-size:11px;font-weight:700;padding:4px 8px;cursor:pointer;">전체 읽음</button>' +<br />
'</div>' +<br />
'<div id="clbi-notification-list" style="max-height:320px;overflow-y:auto;padding:8px 0;color:#E2E2E2;font-size:12px;">불러오는 중...</div>' +<br />
'<div style="padding:8px;border-top:1px solid #2a2a2a;background:#111;">' +<br />
'<a href="/index.php?title=Special:Notifications" id="clbi-notification-more" style="display:block;width:100%;text-align:center;padding:8px 10px;border-radius:6px;background:#171717;border:1px solid #854369;color:#E2E2E2 !important;text-decoration:none !important;font-size:12px;font-weight:700;">더보기</a>' +<br />
'</div>';<br />
<br />
document.body.appendChild(popup);<br />
}<br />
<br />
function positionNotificationPopup() {<br />
var btn = document.getElementById('profile-quick-notifications');<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!btn || !popup) return;<br />
<br />
var rect = btn.getBoundingClientRect();<br />
var top = rect.bottom + 6;<br />
var left = rect.left + (rect.width / 2) - (popup.offsetWidth / 2);<br />
<br />
if (left < 8) left = 8;<br />
if (left + popup.offsetWidth > window.innerWidth - 8) {<br />
left = window.innerWidth - popup.offsetWidth - 8;<br />
}<br />
if (top + popup.offsetHeight > window.innerHeight - 8) {<br />
top = Math.max(8, rect.top - popup.offsetHeight - 6);<br />
}<br />
<br />
popup.style.top = top + 'px';<br />
popup.style.left = left + 'px';<br />
}<br />
<br />
function parseNotificationItemsFromHtml(html) {<br />
var parser = new DOMParser();<br />
var doc = parser.parseFromString(html, 'text/html');<br />
<br />
var selectors = [<br />
'.mw-echo-ui-notificationItemWidget',<br />
'.mw-echo-ui-notificationsInboxWidgetRow',<br />
'.echo-ui-notificationItemWidget',<br />
'li[data-notification-id]',<br />
'.mw-echo-notifications-list li'<br />
];<br />
<br />
var items = [];<br />
for (var i = 0; i < selectors.length; i++) {<br />
items = Array.prototype.slice.call(doc.querySelectorAll(selectors[i]));<br />
if (items.length) break;<br />
}<br />
<br />
return items.slice(0, 5).map(function(item) {<br />
var link = item.querySelector('a[href]');<br />
var href = link ? link.getAttribute('href') : '/index.php?title=Special:Notifications';<br />
var text = (item.textContent || '').replace(/\s+/g, ' ').trim();<br />
<br />
var notificationId =<br />
item.getAttribute('data-notification-id') ||<br />
item.getAttribute('data-id') ||<br />
item.getAttribute('data-notification') ||<br />
'';<br />
<br />
if (!notificationId) {<br />
var anyWithId = item.querySelector('[data-notification-id], [data-id], [data-notification]');<br />
if (anyWithId) {<br />
notificationId =<br />
anyWithId.getAttribute('data-notification-id') ||<br />
anyWithId.getAttribute('data-id') ||<br />
anyWithId.getAttribute('data-notification') ||<br />
'';<br />
}<br />
}<br />
<br />
if (href && href.indexOf('http') !== 0) {<br />
href = href.charAt(0) === '/'<br />
? href<br />
: '/index.php' + (href.charAt(0) === '?' ? href : '/' + href);<br />
}<br />
<br />
return {<br />
id: notificationId,<br />
href: href,<br />
text: text || '알림'<br />
};<br />
});<br />
}<br />
<br />
function setNotificationIcon(hasItems) {<br />
var quickIcon = document.getElementById('profile-quick-notification-icon');<br />
var svg = hasItems ? CLBI_SVG_BELL_DOT : CLBI_SVG_BELL;<br />
<br />
if (quickIcon) {<br />
quickIcon.innerHTML = svg;<br />
quickIcon.classList.toggle('has-notifications', !!hasItems);<br />
}<br />
}<br />
<br />
function renderNotificationPopup(items) {<br />
var list = document.getElementById('clbi-notification-list');<br />
var badge = document.getElementById('clbi-notification-badge');<br />
if (!list) return;<br />
<br />
if (!items || !items.length) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">표시할 알림이 없습니다.</div>';<br />
if (badge) badge.style.display = 'none';<br />
setNotificationIcon(false);<br />
return;<br />
}<br />
<br />
var html = '';<br />
for (var i = 0; i < items.length; i++) {<br />
html +=<br />
'<a href="' + items[i].href + '" class="clbi-notification-item" data-notification-id="' + (items[i].id || '') + '" style="display:block;padding:10px 12px;color:#E2E2E2 !important;text-decoration:none !important;border-bottom:1px solid #1f1f1f;line-height:1.5;">' +<br />
items[i].text +<br />
'</a>';<br />
}<br />
list.innerHTML = html;<br />
<br />
if (badge) {<br />
badge.textContent = items.length;<br />
badge.style.display = 'block';<br />
}<br />
setNotificationIcon(true);<br />
}<br />
<br />
function loadNotificationsIntoPopup() {<br />
var list = document.getElementById('clbi-notification-list');<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">불러오는 중...</div>';<br />
}<br />
<br />
fetch('/index.php?title=Special:Notifications', { credentials: 'same-origin' })<br />
.then(function(res) {<br />
return res.text();<br />
})<br />
.then(function(html) {<br />
var items = parseNotificationItemsFromHtml(html);<br />
renderNotificationPopup(items);<br />
})<br />
.catch(function(err) {<br />
console.error(err);<br />
if (list) {<br />
list.innerHTML = '<div style="padding:14px 12px;color:#999;">알림을 불러오지 못했습니다.</div>';<br />
}<br />
});<br />
}<br />
<br />
function markAllNotificationsRead() {<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: 'all'<br />
});<br />
}<br />
<br />
function markNotificationReadById(notificationId) {<br />
if (!notificationId) {<br />
return $.Deferred().resolve().promise();<br />
}<br />
<br />
return new mw.Api().postWithToken('csrf', {<br />
action: 'echomarkread',<br />
list: notificationId<br />
});<br />
}<br />
<br />
function initNotifications() {<br />
var quickBtn = document.getElementById('profile-quick-notifications');<br />
<br />
if (!quickBtn) return;<br />
<br />
ensureNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
<br />
$(document)<br />
.off('click.clbiNotificationToggle')<br />
.on('click.clbiNotificationToggle', '#profile-quick-notifications', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (!popup) return;<br />
<br />
if (popup.style.display === 'none' || popup.style.display === '') {<br />
popup.style.display = 'block';<br />
positionNotificationPopup();<br />
loadNotificationsIntoPopup();<br />
} else {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationOutside')<br />
.on('click.clbiNotificationOutside', function(e) {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
var quickToggle = document.getElementById('profile-quick-notifications');<br />
if (!popup) return;<br />
<br />
if (!popup.contains(e.target) && (!quickToggle || !quickToggle.contains(e.target))) {<br />
popup.style.display = 'none';<br />
}<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationReadAll')<br />
.on('click.clbiNotificationReadAll', '#clbi-notification-readall', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var button = this;<br />
button.disabled = true;<br />
button.textContent = '처리 중...';<br />
<br />
markAllNotificationsRead()<br />
.then(function() {<br />
loadNotificationsIntoPopup();<br />
})<br />
.always(function() {<br />
button.disabled = false;<br />
button.textContent = '전체 읽음';<br />
});<br />
});<br />
<br />
$(document)<br />
.off('click.clbiNotificationItem')<br />
.on('click.clbiNotificationItem', '.clbi-notification-item', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
<br />
var href = this.getAttribute('href');<br />
var notificationId = this.getAttribute('data-notification-id') || '';<br />
<br />
markNotificationReadById(notificationId).always(function() {<br />
loadNotificationsIntoPopup();<br />
if (href) {<br />
window.location.href = href;<br />
}<br />
});<br />
});<br />
<br />
$(window)<br />
.off('resize.clbiNotification')<br />
.on('resize.clbiNotification', function() {<br />
var popup = document.getElementById('clbi-notification-popup');<br />
if (popup && popup.style.display === 'block') {<br />
positionNotificationPopup();<br />
}<br />
});<br />
}<br />
// ========== 알림 시스템 끝 ==========<br />
<br />
function initUserProfilePage() {<br />
$('body').addClass('user-profile-settings-page');<br />
<br />
var saveBtn = document.getElementById('pref-save');<br />
if (!saveBtn) return;<br />
<br />
function getPrefRow(id) {<br />
var el = document.getElementById(id);<br />
if (!el) return null;<br />
return el.closest('.clbi-pref-row') || el.parentNode;<br />
}<br />
<br />
function removePrefRow(id) {<br />
var row = getPrefRow(id);<br />
if (row && row.parentNode) {<br />
row.parentNode.removeChild(row);<br />
}<br />
}<br />
<br />
function createPrefSection(className, titleText) {<br />
var section = document.createElement('div');<br />
section.className = 'clbi-pref-section ' + className;<br />
<br />
var title = document.createElement('div');<br />
title.className = 'clbi-pref-section-title';<br />
title.textContent = titleText;<br />
<br />
var body = document.createElement('div');<br />
body.className = 'clbi-pref-section-body';<br />
<br />
section.appendChild(title);<br />
section.appendChild(body);<br />
<br />
return {<br />
section: section,<br />
body: body<br />
};<br />
}<br />
<br />
function moveRowToSection(id, targetBody, className) {<br />
var row = getPrefRow(id);<br />
if (!row || !targetBody) return false;<br />
<br />
row.classList.add('clbi-pref-row-key-' + className);<br />
targetBody.appendChild(row);<br />
return true;<br />
}<br />
<br />
function rebuildProfileSettingsLayout() {<br />
var root = document.querySelector('.clbi-prefs-profile');<br />
if (!root || root.dataset.profileSettingsReworked === '1') return;<br />
<br />
root.dataset.profileSettingsReworked = '1';<br />
root.classList.add('profile-settings-console');<br />
<br />
removePrefRow('pref-badges');<br />
<br />
var originalRows = Array.prototype.slice.call(root.querySelectorAll('.clbi-pref-row'));<br />
var actionNodes = [];<br />
<br />
if (saveBtn.parentNode === root || saveBtn.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(saveBtn);<br />
}<br />
<br />
var statusNode = document.getElementById('pref-status');<br />
if (statusNode && statusNode.closest('.clbi-prefs-profile') === root) {<br />
actionNodes.push(statusNode);<br />
}<br />
<br />
var main = document.createElement('div');<br />
main.className = 'clbi-pref-main-grid';<br />
<br />
var media = createPrefSection('clbi-pref-section-media', 'PROFILE IMAGE');<br />
var identity = createPrefSection('clbi-pref-section-identity', 'IDENTITY RECORD');<br />
var bio = createPrefSection('clbi-pref-section-bio', 'BIOGRAPHY');<br />
var account = createPrefSection('clbi-pref-section-account', 'ACCOUNT CONTACT');<br />
var misc = createPrefSection('clbi-pref-section-misc', 'OTHER OPTIONS');<br />
<br />
main.appendChild(media.section);<br />
main.appendChild(identity.section);<br />
main.appendChild(bio.section);<br />
main.appendChild(account.section);<br />
main.appendChild(misc.section);<br />
<br />
root.innerHTML = '';<br />
root.appendChild(main);<br />
<br />
moveRowToSection('pref-pfp-preview', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-btn', media.body, 'pfp');<br />
moveRowToSection('pref-pfp-input', media.body, 'pfp');<br />
<br />
moveRowToSection('pref-name', identity.body, 'name');<br />
moveRowToSection('pref-role', identity.body, 'role');<br />
moveRowToSection('pref-discord', identity.body, 'discord');<br />
<br />
moveRowToSection('pref-bio', bio.body, 'bio');<br />
<br />
moveRowToSection('pref-new-email', account.body, 'email');<br />
moveRowToSection('pref-email-password', account.body, 'email');<br />
moveRowToSection('pref-email-save', account.body, 'email');<br />
<br />
originalRows.forEach(function (row) {<br />
if (!row.parentNode && !row.className.match(/clbi-pref-row-key-/)) {<br />
misc.body.appendChild(row);<br />
}<br />
});<br />
<br />
if (!misc.body.children.length) {<br />
misc.section.parentNode.removeChild(misc.section);<br />
}<br />
<br />
var actions = document.createElement('div');<br />
actions.className = 'clbi-pref-actions';<br />
<br />
if (saveBtn) actions.appendChild(saveBtn);<br />
if (statusNode) actions.appendChild(statusNode);<br />
<br />
root.appendChild(actions);<br />
}<br />
<br />
rebuildProfileSettingsLayout();<br />
<br />
var api = new mw.Api();<br />
var selectedFile = null;<br />
var cropper = null;<br />
<br />
if (!document.getElementById('clbi-gallery-modal')) {<br />
var gModal = document.createElement('div');<br />
gModal.id = 'clbi-gallery-modal';<br />
gModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
gModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:480px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="display:flex;justify-content:space-between;align-items:center;">' +<br />
'<span style="font-size:14px;font-weight:700;color:#e2e2e2;">프로필 사진 선택</span>' +<br />
'<button type="button" id="clbi-gallery-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;">✕</button>' +<br />
'</div>' +<br />
'<button type="button" id="clbi-gallery-upload-btn" style="background:#2a2a2a;border:2px dashed #854369;border-radius:8px;padding:32px;color:#e2e2e2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;width:100%;">' +<br />
'<span style="font-size:32px;">🖼️</span>새 사진 업로드' +<br />
'</button>' +<br />
'<div id="clbi-gallery-history-section" style="display:none;">' +<br />
'<div style="font-size:11px;color:#888;margin-bottom:8px;">이전 사진 — 클릭하면 바로 적용</div>' +<br />
'<div id="clbi-gallery-history" style="display:flex;gap:8px;flex-wrap:wrap;"></div>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(gModal);<br />
}<br />
<br />
if (!document.getElementById('clbi-crop-modal')) {<br />
var cModal = document.createElement('div');<br />
cModal.id = 'clbi-crop-modal';<br />
cModal.style.cssText =<br />
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;align-items:center;justify-content:center;';<br />
<br />
cModal.innerHTML =<br />
'<div style="background:#1e1e1e;border:2px solid #854369;border-radius:12px;padding:24px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:16px;">' +<br />
'<div style="font-size:14px;font-weight:700;color:#e2e2e2;">사진 조정</div>' +<br />
'<div style="width:100%;max-height:380px;overflow:hidden;border-radius:8px;">' +<br />
'<img id="clbi-crop-image" style="max-width:100%;">' +<br />
'</div>' +<br />
'<div style="display:flex;gap:8px;justify-content:flex-end;">' +<br />
'<button type="button" id="clbi-crop-cancel" style="background:#2a2a2a;color:#e2e2e2;border:1px solid #444;padding:8px 16px;border-radius:6px;cursor:pointer;">취소</button>' +<br />
'<button type="button" id="clbi-crop-confirm" style="background:#854369;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;">확정</button>' +<br />
'</div>' +<br />
'</div>';<br />
<br />
document.body.appendChild(cModal);<br />
}<br />
<br />
var gModal = document.getElementById('clbi-gallery-modal');<br />
var cModal = document.getElementById('clbi-crop-modal');<br />
var cropImage = document.getElementById('clbi-crop-image');<br />
var pfpInput = document.getElementById('pref-pfp-input');<br />
<br />
function openGallery() {<br />
gModal.style.display = 'flex';<br />
<br />
var username = mw.config.get('wgUserName');<br />
api.get({<br />
action: 'query',<br />
titles: '파일:Pfp-' + username + '.png',<br />
prop: 'imageinfo',<br />
iiprop: 'url|timestamp',<br />
iilimit: 6<br />
}).then(function(data) {<br />
var pages = data.query.pages;<br />
var page = pages[Object.keys(pages)[0]];<br />
if (!page.imageinfo || page.imageinfo.length === 0) return;<br />
<br />
var historyEl = document.getElementById('clbi-gallery-history');<br />
var sectionEl = document.getElementById('clbi-gallery-history-section');<br />
historyEl.innerHTML = '';<br />
<br />
page.imageinfo.forEach(function(info, idx) {<br />
var wrap = document.createElement('div');<br />
wrap.style.cssText = 'position:relative;cursor:pointer;';<br />
<br />
var img = document.createElement('img');<br />
img.src = info.url;<br />
img.style.cssText =<br />
'width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #444;flex-shrink:0;';<br />
<br />
if (idx === 0) {<br />
img.style.borderColor = '#854369';<br />
var badge = document.createElement('div');<br />
badge.textContent = '현재';<br />
badge.style.cssText =<br />
'position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:#854369;color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;';<br />
wrap.appendChild(badge);<br />
}<br />
<br />
img.addEventListener('mouseenter', function() {<br />
if (idx !== 0) img.style.borderColor = '#854369';<br />
});<br />
<br />
img.addEventListener('mouseleave', function() {<br />
if (idx !== 0) img.style.borderColor = '#444';<br />
});<br />
<br />
img.addEventListener('click', function() {<br />
fetch(info.url)<br />
.then(function(r) {<br />
return r.blob();<br />
})<br />
.then(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
gModal.style.display = 'none';<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
});<br />
});<br />
<br />
wrap.appendChild(img);<br />
historyEl.appendChild(wrap);<br />
});<br />
<br />
sectionEl.style.display = 'block';<br />
});<br />
}<br />
<br />
function openCrop(src) {<br />
cropImage.src = src;<br />
cModal.style.display = 'flex';<br />
<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
<br />
setTimeout(function() {<br />
cropper = new Cropper(cropImage, {<br />
aspectRatio: 1,<br />
viewMode: 1,<br />
dragMode: 'move',<br />
autoCropArea: 0.8,<br />
cropBoxResizable: true,<br />
cropBoxMovable: true<br />
});<br />
}, 150);<br />
}<br />
<br />
document.getElementById('pref-pfp-btn').addEventListener('click', function() {<br />
openGallery();<br />
});<br />
<br />
document.getElementById('clbi-gallery-upload-btn').addEventListener('click', function() {<br />
pfpInput.click();<br />
});<br />
<br />
document.getElementById('clbi-gallery-close').addEventListener('click', function() {<br />
gModal.style.display = 'none';<br />
});<br />
<br />
pfpInput.addEventListener('change', function() {<br />
var file = this.files[0];<br />
if (!file) return;<br />
<br />
gModal.style.display = 'none';<br />
<br />
var reader = new FileReader();<br />
reader.onload = function(e) {<br />
openCrop(e.target.result);<br />
};<br />
reader.readAsDataURL(file);<br />
});<br />
<br />
document.getElementById('clbi-crop-cancel').addEventListener('click', function() {<br />
cModal.style.display = 'none';<br />
if (cropper) {<br />
cropper.destroy();<br />
cropper = null;<br />
}<br />
pfpInput.value = '';<br />
});<br />
<br />
document.getElementById('clbi-crop-confirm').addEventListener('click', function() {<br />
if (!cropper) return;<br />
<br />
var canvas = cropper.getCroppedCanvas({ width: 256, height: 256 });<br />
if (!canvas) return;<br />
<br />
canvas.toBlob(function(blob) {<br />
selectedFile = new File([blob], 'profile.png', { type: 'image/png' });<br />
document.getElementById('pref-pfp-preview').src = URL.createObjectURL(blob);<br />
cModal.style.display = 'none';<br />
cropper.destroy();<br />
cropper = null;<br />
document.getElementById('pref-pfp-btn').textContent = '✓ 사진 선택됨';<br />
}, 'image/png');<br />
});<br />
<br />
var emailSaveBtn = document.getElementById('pref-email-save');<br />
if (emailSaveBtn) {<br />
emailSaveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-email-status');<br />
var newEmail = document.getElementById('pref-new-email').value;<br />
var password = document.getElementById('pref-email-password').value;<br />
<br />
if (!newEmail || !password) {<br />
statusEl.textContent = '이메일과 비밀번호를 입력해주세요.';<br />
return;<br />
}<br />
<br />
statusEl.textContent = '변경 중...';<br />
<br />
api.postWithToken('csrf', {<br />
action: 'changeemail',<br />
email: newEmail,<br />
password: password<br />
}).then(function() {<br />
statusEl.textContent = '✓ 이메일 변경됨';<br />
document.getElementById('pref-new-email').value = '';<br />
document.getElementById('pref-email-password').value = '';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 3000);<br />
}).fail(function(code, data) {<br />
var msg = data && data.error && data.error.info ? data.error.info : '변경 실패';<br />
statusEl.textContent = msg;<br />
});<br />
});<br />
}<br />
<br />
saveBtn.addEventListener('click', function() {<br />
var statusEl = document.getElementById('pref-status');<br />
statusEl.textContent = '저장 중...';<br />
<br />
var promises = [];<br />
<br />
if (selectedFile) {<br />
var username = mw.config.get('wgUserName');<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'upload',<br />
filename: 'Pfp-' + username + '.png',<br />
ignorewarnings: true,<br />
file: selectedFile,<br />
format: 'json'<br />
}, {<br />
contentType: 'multipart/form-data'<br />
})<br />
);<br />
}<br />
<br />
var fields = ['name', 'discord', 'role', 'bio'];<br />
<br />
for (var i = 0; i < fields.length; i++) {<br />
var el = document.getElementById('pref-' + fields[i]);<br />
if (!el) continue;<br />
<br />
promises.push(<br />
api.postWithToken('csrf', {<br />
action: 'options',<br />
optionname: 'profile-' + fields[i],<br />
optionvalue: el.value<br />
})<br />
);<br />
}<br />
<br />
$.when.apply($, promises)<br />
.then(function() {<br />
statusEl.textContent = '✓ 저장됨';<br />
selectedFile = null;<br />
document.getElementById('pref-pfp-btn').textContent = '사진 선택';<br />
<br />
setTimeout(function() {<br />
statusEl.textContent = '';<br />
}, 2000);<br />
})<br />
.fail(function() {<br />
statusEl.textContent = '저장 실패';<br />
});<br />
});<br />
}<br />
<br />
/* =========================================<br />
Banner / CRT Page Monitor thumbnail slices<br />
- base 이미지는 틀에 들어간 파일 문법 그대로 사용<br />
- slice 레이어에는 300px MediaWiki 썸네일만 삽입<br />
========================================= */<br />
<br />
(function ($, mw) {<br />
var thumbCache = {};<br />
<br />
function parseSliceWidth(value) {<br />
var parsed = parseInt(value, 10);<br />
<br />
if (!isFinite(parsed) || parsed < 120) {<br />
return 300;<br />
}<br />
<br />
return parsed;<br />
}<br />
<br />
function getImageSrc(img) {<br />
return img ? (img.currentSrc || img.getAttribute('src') || img.src || '') : '';<br />
}<br />
<br />
function getFileNameFromSrc(src) {<br />
var a;<br />
var parts;<br />
var fileName;<br />
<br />
if (!src) return '';<br />
<br />
a = document.createElement('a');<br />
a.href = src;<br />
<br />
parts = (a.pathname || '').split('/').filter(function (part) {<br />
return !!part;<br />
});<br />
<br />
if (!parts.length) return '';<br />
<br />
fileName = parts.pop();<br />
<br />
/*<br />
* MediaWiki thumb URL 예시:<br />
* /images/thumb/a/ab/File.png/1000px-File.png<br />
* /images/thumb/a/ab/File.svg/1000px-File.svg.png<br />
*<br />
* 이 경우 실제 파일명은 마지막 조각이 아니라 그 앞 조각이다.<br />
*/<br />
if (/^\d+px-/.test(fileName) && parts.length) {<br />
fileName = parts.pop();<br />
}<br />
<br />
fileName = fileName.replace(/^\d+px-/, '');<br />
<br />
try {<br />
fileName = decodeURIComponent(fileName);<br />
} catch (e) {}<br />
<br />
return fileName;<br />
}<br />
<br />
function resolveThumbUrl(img, width, callback) {<br />
var src = getImageSrc(img);<br />
var fileName = getFileNameFromSrc(src);<br />
var cacheKey;<br />
var entry;<br />
<br />
if (!src) return;<br />
<br />
if (!fileName || !mw || !mw.loader) {<br />
callback(src);<br />
return;<br />
}<br />
<br />
cacheKey = fileName + '|' + width;<br />
entry = thumbCache[cacheKey];<br />
<br />
if (entry) {<br />
if (entry.resolved) {<br />
callback(entry.url || src);<br />
} else {<br />
entry.callbacks.push(callback);<br />
}<br />
return;<br />
}<br />
<br />
entry = {<br />
resolved: false,<br />
url: '',<br />
callbacks: [callback]<br />
};<br />
<br />
thumbCache[cacheKey] = entry;<br />
<br />
function finish(url) {<br />
var callbacks = entry.callbacks.slice();<br />
var i;<br />
<br />
entry.resolved = true;<br />
entry.url = url || src;<br />
entry.callbacks = [];<br />
<br />
for (i = 0; i < callbacks.length; i++) {<br />
callbacks[i](entry.url);<br />
}<br />
}<br />
<br />
mw.loader.using('mediawiki.api').done(function () {<br />
var api = new mw.Api();<br />
<br />
api.get({<br />
action: 'query',<br />
titles: 'File:' + fileName,<br />
prop: 'imageinfo',<br />
iiprop: 'url',<br />
iiurlwidth: width,<br />
formatversion: 2<br />
}).done(function (data) {<br />
var page;<br />
var info;<br />
<br />
if (<br />
data &&<br />
data.query &&<br />
data.query.pages &&<br />
data.query.pages.length<br />
) {<br />
page = data.query.pages[0];<br />
<br />
if (<br />
page &&<br />
page.imageinfo &&<br />
page.imageinfo.length<br />
) {<br />
info = page.imageinfo[0];<br />
}<br />
}<br />
<br />
finish((info && (info.thumburl || info.url)) || src);<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}).fail(function () {<br />
finish(src);<br />
});<br />
}<br />
<br />
function applySliceImages(frame, thumbUrl) {<br />
var slices;<br />
var i;<br />
var img;<br />
<br />
if (!frame || !thumbUrl) return;<br />
<br />
slices = frame.querySelectorAll('.crt-page-monitor-slice');<br />
<br />
for (i = 0; i < slices.length; i++) {<br />
slices[i].innerHTML = '';<br />
<br />
img = document.createElement('img');<br />
img.className = 'crt-page-monitor-slice-img';<br />
img.src = thumbUrl;<br />
img.alt = '';<br />
img.decoding = 'async';<br />
img.loading = 'eager';<br />
img.setAttribute('aria-hidden', 'true');<br />
<br />
slices[i].appendChild(img);<br />
}<br />
<br />
frame.setAttribute('data-crt-slices-ready', '1');<br />
}<br />
<br />
function initBannerFrame(frame) {<br />
var baseImg;<br />
var width;<br />
<br />
if (!frame) return;<br />
if (frame.getAttribute('data-crt-slices-ready') === '1') return;<br />
<br />
baseImg = frame.querySelector('.crt-page-monitor-image-base img');<br />
<br />
if (!baseImg) return;<br />
<br />
width = parseSliceWidth(frame.getAttribute('data-crt-slice-width'));<br />
<br />
resolveThumbUrl(baseImg, width, function (thumbUrl) {<br />
if (!frame || !frame.parentNode) return;<br />
applySliceImages(frame, thumbUrl);<br />
});<br />
}<br />
<br />
function initBannerFrames(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
var frames = scope.querySelectorAll('.crt-page-monitor-frame');<br />
var i;<br />
<br />
for (i = 0; i < frames.length; i++) {<br />
initBannerFrame(frames[i]);<br />
}<br />
}<br />
<br />
$(function () {<br />
initBannerFrames(document);<br />
});<br />
<br />
if (mw && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($content) {<br />
initBannerFrames($content && $content[0] ? $content[0] : document);<br />
});<br />
}<br />
})(jQuery, window.mw);<br />
<br />
/* =========================================<br />
Doc Tab System — Q/E 단축키 탭 전환<br />
글리치 플리커 + RGB split + 방향 슬라이드<br />
========================================= */<br />
<br />
(function () {<br />
'use strict';<br />
<br />
var keydownBound = false;<br />
<br />
function initDocTabs() {<br />
var tabBars = document.querySelectorAll('.doc-tab-bar');<br />
if (!tabBars.length) return;<br />
<br />
tabBars.forEach(function (bar) {<br />
if (bar.getAttribute('data-tabs-init')) return;<br />
bar.setAttribute('data-tabs-init', '1');<br />
<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
if (!tabs.length) return;<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
tabs.forEach(function (tab, i) {<br />
tab.addEventListener('click', function () {<br />
var currentIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (currentIdx === i) return;<br />
switchTab(tabs, display, i, i > currentIdx ? 1 : -1);<br />
});<br />
});<br />
<br />
var initIdx = tabs.findIndex(function (t) { return t.classList.contains('active'); });<br />
if (initIdx !== -1) {<br />
var initRef = tabs[initIdx].dataset.ref;<br />
var initEl = initRef ? document.getElementById(initRef) : null;<br />
display.innerHTML = initEl ? initEl.innerHTML : (tabs[initIdx].dataset.content || '');<br />
}<br />
});<br />
<br />
if (!keydownBound) {<br />
keydownBound = true;<br />
document.addEventListener('keydown', function (e) {<br />
var tag = document.activeElement.tagName;<br />
if (tag === 'INPUT' || tag === 'TEXTAREA') return;<br />
<br />
var bar = document.querySelector('.doc-tab-bar');<br />
if (!bar) return;<br />
var tabs = Array.from(bar.querySelectorAll('.doc-tab'));<br />
<br />
var panel = bar.closest('.doc-panel');<br />
var display = panel ? panel.querySelector('.doc-display') : null;<br />
if (!display) display = document.getElementById('doc-main-display');<br />
if (!display) return;<br />
<br />
var activeIdx = tabs.findIndex(function (t) {<br />
return t.classList.contains('active');<br />
});<br />
if (activeIdx === -1) return;<br />
<br />
if (e.key === 'q' || e.key === 'Q') {<br />
e.preventDefault();<br />
var prev = (activeIdx - 1 + tabs.length) % tabs.length;<br />
if (prev !== activeIdx) switchTab(tabs, display, prev, -1);<br />
} else if (e.key === 'e' || e.key === 'E') {<br />
e.preventDefault();<br />
var next = (activeIdx + 1) % tabs.length;<br />
if (next !== activeIdx) switchTab(tabs, display, next, 1);<br />
}<br />
});<br />
}<br />
}<br />
<br />
var isAnimating = false;<br />
<br />
function switchTab(tabs, display, nextIdx, dir) {<br />
if (isAnimating) return;<br />
isAnimating = true;<br />
<br />
tabs.forEach(function (t) { t.classList.remove('active'); });<br />
tabs[nextIdx].classList.add('active');<br />
<br />
var ref = tabs[nextIdx].dataset.ref;<br />
var nextContent;<br />
if (ref) {<br />
var refEl = document.getElementById(ref);<br />
nextContent = refEl ? refEl.innerHTML : '';<br />
} else {<br />
nextContent = tabs[nextIdx].dataset.content || '';<br />
}<br />
<br />
glitchOut(display, dir, function () {<br />
display.innerHTML = nextContent;<br />
glitchIn(display, dir, function () {<br />
isAnimating = false;<br />
});<br />
});<br />
}<br />
<br />
function glitchOut(el, dir, cb) {<br />
var duration = 160;<br />
var start = null;<br />
var slideX = dir * 16;<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = p * p;<br />
<br />
var tx = slideX * ease;<br />
var skew = dir * ease * 1.0;<br />
var opacity = 1 - ease;<br />
var rgb = ease * 5;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.75)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.65)) ' +<br />
'brightness(' + (1 + ease * 0.25) + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.opacity = '0';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
function glitchIn(el, dir, cb) {<br />
var duration = 200;<br />
var start = null;<br />
var startX = -dir * 16;<br />
<br />
el.style.transform = 'translateX(' + startX + 'px) skewX(' + (-dir * 1.0) + 'deg)';<br />
el.style.opacity = '0';<br />
<br />
function step(ts) {<br />
if (!start) start = ts;<br />
var p = Math.min((ts - start) / duration, 1);<br />
var ease = 1 - Math.pow(1 - p, 3);<br />
<br />
var tx = startX * (1 - ease);<br />
var skew = -dir * 1.0 * (1 - ease);<br />
var opacity = ease;<br />
var rgb = (1 - ease) * 3;<br />
var brightness = 1 + (1 - ease) * 0.35;<br />
<br />
el.style.transform = 'translateX(' + tx + 'px) skewX(' + skew + 'deg)';<br />
el.style.opacity = opacity;<br />
el.style.filter =<br />
'drop-shadow(' + (-rgb) + 'px 0 0 rgba(80,160,255,0.65)) ' +<br />
'drop-shadow(' + rgb + 'px 0 0 rgba(255,55,90,0.55)) ' +<br />
'brightness(' + brightness + ')';<br />
<br />
if (p < 1) {<br />
requestAnimationFrame(step);<br />
} else {<br />
el.style.transform = '';<br />
el.style.opacity = '';<br />
el.style.filter = '';<br />
cb();<br />
}<br />
}<br />
requestAnimationFrame(step);<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initDocTabs);<br />
} else {<br />
initDocTabs();<br />
}<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function () {<br />
initDocTabs();<br />
});<br />
}<br />
<br />
})();<br />
<br />
/* =========================================<br />
Doc Section Switch — 좌측 섹션 전환<br />
========================================= */<br />
<br />
$(document).on('click', '.doc-nav-item[data-section]', function () {<br />
var name = $(this).attr('data-section');<br />
var display = document.getElementById('doc-main-display');<br />
var titleEl = document.getElementById('doc-center-title');<br />
var tabBar = document.getElementById('doc-tab-bar-text');<br />
<br />
if (!display) return;<br />
<br />
$('.doc-nav-item[data-section]').removeClass('active');<br />
$('.doc-nav-item[data-section="' + name + '"]').addClass('active');<br />
<br />
if (name === 'text') {<br />
if (titleEl) titleEl.textContent = '개요';<br />
if (tabBar) $(tabBar).show();<br />
var activeTab = tabBar ? tabBar.querySelector('.doc-tab.active') : null;<br />
if (!activeTab && tabBar) activeTab = tabBar.querySelector('.doc-tab');<br />
if (activeTab) {<br />
var ref = activeTab.dataset.ref;<br />
var refEl = ref ? document.getElementById(ref) : null;<br />
display.innerHTML = refEl ? refEl.innerHTML : (activeTab.dataset.content || '');<br />
}<br />
} else {<br />
if (titleEl) titleEl.textContent = name === 'factions' ? '세력' : name === 'people' ? '인물' : name;<br />
if (tabBar) $(tabBar).hide();<br />
var refEl = document.getElementById('doc-content-' + name);<br />
display.innerHTML = refEl ? refEl.innerHTML : '';<br />
}<br />
});<br />
<br />
/* =========================================<br />
CRT WebGL Renderer — cool-retro-term IBM DOS style<br />
========================================= */<br />
(function () {<br />
'use strict';<br />
<br />
function createNoiseTexture(gl) {<br />
var size = 512;<br />
var data = new Uint8Array(size * size * 4);<br />
var s = 12345;<br />
function rand() {<br />
s = (s * 1664525 + 1013904223) & 0xffffffff;<br />
return (s >>> 0) / 0xffffffff;<br />
}<br />
for (var i = 0; i < data.length; i++) {<br />
data[i] = (rand() * 255) | 0;<br />
}<br />
var tex = gl.createTexture();<br />
gl.bindTexture(gl.TEXTURE_2D, tex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
return tex;<br />
}<br />
<br />
var VERT = [<br />
'attribute vec2 a_pos;',<br />
'varying vec2 v_uv;',<br />
'void main() {',<br />
' v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);',<br />
' gl_Position = vec4(a_pos, 0.0, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
var FRAG = [<br />
'precision mediump float;',<br />
'uniform sampler2D u_tex;',<br />
'uniform sampler2D u_noise;',<br />
'uniform vec2 u_res;',<br />
'uniform vec2 u_imgSize;',<br />
'uniform float u_time;',<br />
'uniform vec2 u_noiseScale;',<br />
'varying vec2 v_uv;',<br />
<br />
'float sum2(vec2 v) { return v.x + v.y; }',<br />
'float min2(vec2 v) { return min(v.x, v.y); }',<br />
'float rgb2grey(vec3 v) { return dot(v, vec3(0.21, 0.72, 0.04)); }',<br />
<br />
'vec2 coverUV(vec2 uv) {',<br />
' float imgAR = u_imgSize.x / u_imgSize.y;',<br />
' float scrAR = u_res.x / u_res.y;',<br />
' float scale = imgAR / scrAR;',<br />
' float offsetY = (1.0 - scale) * 0.5;',<br />
' return vec2(uv.x, uv.y * scale + offsetY);',<br />
'}',<br />
<br />
'vec2 barrel(vec2 v, vec2 cc, float k) {',<br />
' float ar = u_res.x / u_res.y;',<br />
' vec2 c2 = cc;',<br />
' if (ar > 1.0) c2.x /= ar; else c2.y *= ar;',<br />
' float dist = dot(c2, c2) * k;',<br />
' return v - cc * (1.0 + dist) * dist;',<br />
'}',<br />
<br />
'vec4 sampleInitialNoise(float t) {',<br />
' return texture2D(u_noise, vec2(fract(t/2048.0), fract(t/1048576.0)));',<br />
'}',<br />
<br />
'vec4 sampleScreenNoise(vec2 uv) {',<br />
' return texture2D(u_noise, u_noiseScale * uv);',<br />
'}',<br />
<br />
'vec3 applyRgbShift(vec2 texUV, float shift) {',<br />
' vec2 d = vec2(shift, 0.0);',<br />
' vec3 r = texture2D(u_tex, clamp(texUV + d, 0.0, 1.0)).rgb;',<br />
' vec3 c = texture2D(u_tex, texUV).rgb;',<br />
' vec3 l = texture2D(u_tex, clamp(texUV - d, 0.0, 1.0)).rgb;',<br />
' return vec3(',<br />
' l.r*0.10 + r.r*0.30 + c.r*0.60,',<br />
' l.g*0.20 + r.g*0.20 + c.g*0.60,',<br />
' l.b*0.30 + r.b*0.10 + c.b*0.60',<br />
' );',<br />
'}',<br />
<br />
'vec3 applyBloom(vec2 texUV, float strength) {',<br />
' vec2 px = 2.0 / u_res;',<br />
' vec3 acc = vec3(0.0);',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, 0.0), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( 0.0, -px.y), 0.0, 1.0)).rgb;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2( px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' acc += texture2D(u_tex, clamp(texUV + vec2(-px.x, -px.y), 0.0, 1.0)).rgb * 0.5;',<br />
' return acc / 6.0 * strength;',<br />
'}',<br />
<br />
'vec3 applyScanlines(vec2 uv, vec3 col) {',<br />
' float line = mod(uv.y * u_res.y, 2.0);',<br />
' vec3 hi = ((1.0 + 0.30) - 0.2 * col) * col;',<br />
' vec3 lo = ((1.0 - 0.30) + 0.1 * col) * col;',<br />
' return line < 1.0 ? lo : hi;',<br />
'}',<br />
<br />
'vec3 applyRasterization(vec2 uv, vec3 col) {',<br />
' float t = u_time;',<br />
' vec2 noiseUV = uv + vec2(fract(t * 0.030), fract(t * 0.060));',<br />
' float wobbleX = (texture2D(u_noise, noiseUV * 0.8).r - 0.5) * 0.0018;',<br />
' float wobbleY = (texture2D(u_noise, noiseUV * 0.8 + 0.5).r - 0.5) * 0.0008;',<br />
' vec2 wobbledUV = clamp(uv + vec2(wobbleX, wobbleY), 0.0, 1.0);',<br />
' vec3 wobbled = texture2D(u_tex, wobbledUV).rgb;',<br />
' return mix(col, wobbled, 0.35);',<br />
'}',<br />
<br />
'float glowingLine(vec2 uv, float t) {',<br />
' float pos = fract(t * 0.2);',<br />
' float lineY = pos * (u_res.y + 330.0) - 120.0;',<br />
' float y = uv.y * u_res.y;',<br />
' return fract(smoothstep(-300.0, 0.0, y - lineY));',<br />
'}',<br />
<br />
'vec2 applyHSync(vec2 uv, vec4 noise, float strength) {',<br />
' float randval = strength - noise.r;',<br />
' float scale = step(0.0, randval) * randval * strength;',<br />
' float freq = mix(4.0, 40.0, noise.g);',<br />
' uv.x += sin((uv.y + u_time * 0.001) * freq) * scale;',<br />
' return uv;',<br />
'}',<br />
<br />
'void main() {',<br />
' vec2 cc = vec2(0.5) - v_uv;',<br />
<br />
' float curvature = 0.18;',<br />
' vec2 uv = barrel(v_uv, cc, curvature);',<br />
<br />
' float inScreen = min2(step(vec2(0.0), uv) - step(vec2(1.0), uv));',<br />
' if (inScreen < 0.5) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; }',<br />
<br />
' vec2 texUV = clamp(coverUV(uv), 0.0, 1.0);',<br />
<br />
' vec4 initNoise = sampleInitialNoise(u_time);',<br />
' vec4 screenNoise = sampleScreenNoise(uv);',<br />
<br />
' texUV = applyHSync(texUV, initNoise, 0.006);',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' texUV += (vec2(screenNoise.b, screenNoise.a) - 0.5) * 0.0006;',<br />
' texUV = clamp(texUV, 0.0, 1.0);',<br />
<br />
' vec3 col = applyRgbShift(texUV, 0.003);',<br />
' col += applyBloom(texUV, 0.22);',<br />
<br />
' vec2 bpx = 1.5 / u_res;',<br />
' vec3 blurCol = vec3(0.0);',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, -bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, 0.0 ), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2(-bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( 0.0, bpx.y), 0.0, 1.0)).rgb;',<br />
' blurCol += texture2D(u_tex, clamp(texUV + vec2( bpx.x, bpx.y), 0.0, 1.0)).rgb;',<br />
' col = mix(col, blurCol / 8.0, 0.40);',<br />
<br />
' col = applyScanlines(uv, col);',<br />
' col = applyRasterization(texUV, col);',<br />
<br />
' float glow = glowingLine(uv, u_time);',<br />
' col += glow * 0.08 * vec3(0.85, 0.95, 1.0);',<br />
<br />
' float dist = length(cc);',<br />
' col += screenNoise.a * 0.07 * (1.0 - dist * 1.3);',<br />
<br />
' float grey = rgb2grey(col);',<br />
' vec3 phosphor = vec3(0.75, 0.88, 1.0);',<br />
' col = mix(col, grey * phosphor, 0.35);',<br />
<br />
' vec2 vig = v_uv * (1.0 - v_uv);',<br />
' col *= pow(vig.x * vig.y * 15.0, 0.25);',<br />
<br />
' col *= 1.0 + (initNoise.g - 0.5) * 0.06;',<br />
<br />
' col += vec3(0.012) * (1.0 - dist) * (1.0 - dist);',<br />
<br />
' col = pow(clamp(col, 0.0, 1.0), vec3(0.90));',<br />
<br />
' gl_FragColor = vec4(col, 1.0);',<br />
'}'<br />
].join('\n');<br />
<br />
function initCRTCanvas(screen, imgEl) {<br />
var existing = screen.querySelector('.crt-webgl-canvas');<br />
if (existing) existing.remove();<br />
<br />
var canvas = document.createElement('canvas');<br />
canvas.className = 'crt-webgl-canvas';<br />
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;z-index:19;pointer-events:none;display:block;';<br />
screen.appendChild(canvas);<br />
<br />
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');<br />
if (!gl) return;<br />
<br />
function compile(type, src) {<br />
var s = gl.createShader(type);<br />
gl.shaderSource(s, src);<br />
gl.compileShader(s);<br />
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {<br />
console.error('[CRT shader]', gl.getShaderInfoLog(s));<br />
}<br />
return s;<br />
}<br />
<br />
var prog = gl.createProgram();<br />
gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));<br />
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));<br />
gl.linkProgram(prog);<br />
gl.useProgram(prog);<br />
<br />
var buf = gl.createBuffer();<br />
gl.bindBuffer(gl.ARRAY_BUFFER, buf);<br />
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);<br />
var aPos = gl.getAttribLocation(prog, 'a_pos');<br />
gl.enableVertexAttribArray(aPos);<br />
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);<br />
<br />
var uTex = gl.getUniformLocation(prog, 'u_tex');<br />
var uNoise = gl.getUniformLocation(prog, 'u_noise');<br />
var uRes = gl.getUniformLocation(prog, 'u_res');<br />
var uImgSize = gl.getUniformLocation(prog, 'u_imgSize');<br />
var uTime = gl.getUniformLocation(prog, 'u_time');<br />
var uNoiseSc = gl.getUniformLocation(prog, 'u_noiseScale');<br />
<br />
var imgTex = gl.createTexture();<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);<br />
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);<br />
<br />
gl.activeTexture(gl.TEXTURE1);<br />
createNoiseTexture(gl);<br />
<br />
var texReady = false;<br />
function uploadImg() {<br />
if (!imgEl || !imgEl.complete || !imgEl.naturalWidth) return;<br />
try {<br />
gl.activeTexture(gl.TEXTURE0);<br />
gl.bindTexture(gl.TEXTURE_2D, imgTex);<br />
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imgEl);<br />
texReady = true;<br />
} catch(e) { console.error('[CRT] tex:', e); }<br />
}<br />
<br />
var lastW = 0, lastH = 0;<br />
function resize() {<br />
var w = screen.offsetWidth, h = screen.offsetHeight;<br />
if (w === lastW && h === lastH) return;<br />
lastW = w; lastH = h;<br />
canvas.width = w; canvas.height = h;<br />
gl.viewport(0, 0, w, h);<br />
}<br />
<br />
var raf;<br />
var t0 = performance.now();<br />
<br />
function render() {<br />
raf = requestAnimationFrame(render);<br />
if (!texReady) { uploadImg(); return; }<br />
resize();<br />
var t = (performance.now() - t0) / 1000;<br />
gl.uniform1i(uTex, 0);<br />
gl.uniform1i(uNoise, 1);<br />
gl.uniform2f(uRes, canvas.width, canvas.height);<br />
gl.uniform2f(uImgSize, imgEl.naturalWidth, imgEl.naturalHeight);<br />
gl.uniform1f(uTime, t);<br />
gl.uniform2f(uNoiseSc, canvas.width / 512.0, canvas.height / 512.0);<br />
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);<br />
}<br />
<br />
if (imgEl.complete && imgEl.naturalWidth) { uploadImg(); }<br />
else { imgEl.addEventListener('load', uploadImg); }<br />
<br />
render();<br />
screen._crtCleanup = function () { cancelAnimationFrame(raf); };<br />
}<br />
<br />
function initAllCRTScreens(root) {<br />
var scope = root && root.querySelectorAll ? root : document;<br />
scope.querySelectorAll('.crt-page-monitor-screen').forEach(function (screen) {<br />
if (screen.getAttribute('data-crt-webgl') === '1') return;<br />
screen.setAttribute('data-crt-webgl', '1');<br />
var frame = screen.closest('.crt-page-monitor-frame');<br />
if (!frame) return;<br />
var imgEl = frame.querySelector('.crt-page-monitor-slice-img, .crt-page-monitor-image-base img');<br />
if (imgEl && imgEl.complete && imgEl.naturalWidth) {<br />
initCRTCanvas(screen, imgEl);<br />
} else if (imgEl) {<br />
imgEl.addEventListener('load', function () { initCRTCanvas(screen, imgEl); });<br />
} else {<br />
var obs = new MutationObserver(function () {<br />
var img = frame.querySelector('.crt-page-monitor-slice-img');<br />
if (!img) return;<br />
obs.disconnect();<br />
if (img.complete && img.naturalWidth) {<br />
initCRTCanvas(screen, img);<br />
} else {<br />
img.addEventListener('load', function () { initCRTCanvas(screen, img); });<br />
}<br />
});<br />
obs.observe(frame, { childList: true, subtree: true });<br />
}<br />
});<br />
}<br />
<br />
$(function () { initAllCRTScreens(document); });<br />
<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function ($c) {<br />
document.querySelectorAll('.crt-page-monitor-screen').forEach(function (s) {<br />
if (s._crtCleanup) s._crtCleanup();<br />
s.removeAttribute('data-crt-webgl');<br />
});<br />
initAllCRTScreens($c && $c[0] ? $c[0] : document);<br />
});<br />
}<br />
})();<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Common.js controlled frontend<br />
========================================= */<br />
(function (mw, $) {<br />
'use strict';<br />
<br />
if (window.ProgressSystemWebUiInitialized) return;<br />
window.ProgressSystemWebUiInitialized = true;<br />
<br />
var api = null;<br />
<br />
function withApi(done, fail) {<br />
if (api) {<br />
done(api);<br />
return;<br />
}<br />
<br />
if (!mw.loader || typeof mw.loader.using !== 'function') {<br />
if (typeof fail === 'function') fail();<br />
return;<br />
}<br />
<br />
mw.loader.using(['mediawiki.api']).then(function () {<br />
api = new mw.Api();<br />
done(api);<br />
}, function () {<br />
if (typeof fail === 'function') fail();<br />
});<br />
}<br />
<br />
var inFlightPageIds = new Set();<br />
var handledPageIds = new Set();<br />
var notificationQueue = [];<br />
var notificationActive = false;<br />
var summaryRequested = false;<br />
var currentSummary = null;<br />
var pendingSummary = null;<br />
var pendingOptions = null;<br />
var visibilityBound = false;<br />
var barTimerA = null;<br />
var barTimerB = null;<br />
var barTimerC = null;<br />
<br />
function isLoggedIn() {<br />
return !!mw.config.get('wgUserName');<br />
}<br />
<br />
function getPageId() {<br />
var id = parseInt(mw.config.get('wgArticleId') || 0, 10);<br />
return Number.isFinite(id) ? id : 0;<br />
}<br />
<br />
function isRewardableClientSide() {<br />
if (!isLoggedIn()) return false;<br />
if (parseInt(mw.config.get('wgNamespaceNumber'), 10) !== 0) return false;<br />
if (mw.config.get('wgIsMainPage')) return false;<br />
if (getPageId() <= 0) return false;<br />
return true;<br />
}<br />
<br />
function getPanelHtml() {<br />
return '' +<br />
'<div id="progress-panel" class="profile-progress-block is-syncing" aria-live="polite" data-progress-state="syncing">' +<br />
'<div class="progress-title-row" hidden></div>' +<br />
'<div class="progress-level-row">' +<br />
'<span class="progress-level-label">SYNC</span>' +<br />
'<span class="progress-total-xp">— XP</span>' +<br />
'</div>' +<br />
'<div class="progress-xp-bar" aria-hidden="true">' +<br />
'<div class="progress-xp-gain"></div>' +<br />
'<div class="progress-xp-fill"></div>' +<br />
'</div>' +<br />
'<div class="progress-sub-row">' +<br />
'<span class="progress-xp-next">SYNCING</span>' +<br />
'<span class="progress-daily-xp">TODAY —</span>' +<br />
'</div>' +<br />
'<div class="progress-discovery-row">DISCOVERED —</div>' +<br />
'</div>';<br />
}<br />
<br />
function getDividerHtml() {<br />
return '<div id="profile-progress-divider" class="profile-divider" aria-hidden="true"></div>';<br />
}<br />
<br />
function setPanelSync($panel) {<br />
if (!$panel || !$panel.length) return;<br />
<br />
$panel.addClass('is-syncing').removeClass('is-max-level').attr('data-progress-state', 'syncing');<br />
$panel.find('.progress-title-row').text('').prop('hidden', true);<br />
$panel.find('.progress-level-label').text('SYNC');<br />
$panel.find('.progress-total-xp').text('— XP');<br />
$panel.find('.progress-xp-next').text('SYNCING');<br />
$panel.find('.progress-daily-xp').text('TODAY —');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED —');<br />
$panel.find('.progress-xp-fill').css({ transition: 'none', width: '0%' });<br />
$panel.find('.progress-xp-gain').css({ transition: 'none', width: '0%', opacity: 0 });<br />
}<br />
<br />
function placePanel($panel) {<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return false;<br />
<br />
var $userBox = $right.children('.clbi-right-box').first();<br />
if (!$userBox.length) return false;<br />
<br />
var $buttonArea = $userBox.children('.clbi-right-content').first();<br />
var $oldFallback = $panel.closest('.progress-panel-fallback');<br />
<br />
if ($buttonArea.length) {<br />
var $divider = $('#profile-progress-divider');<br />
<br />
$panel.insertBefore($buttonArea);<br />
<br />
if (!$divider.length) {<br />
$divider = $(getDividerHtml());<br />
}<br />
<br />
$divider.insertAfter($panel);<br />
} else {<br />
$('#profile-progress-divider').remove();<br />
$userBox.append($panel);<br />
}<br />
<br />
if ($oldFallback.length && !$oldFallback.find('#progress-panel').length) {<br />
$oldFallback.remove();<br />
}<br />
<br />
return true;<br />
}<br />
<br />
function ensurePanel() {<br />
if (!isLoggedIn()) return $();<br />
<br />
var $right = $('#clbi-right-sidebar');<br />
if (!$right.length) return $();<br />
<br />
var $panel = $('#progress-panel');<br />
<br />
if (!$panel.length) {<br />
$panel = $(getPanelHtml());<br />
if (!placePanel($panel)) return $();<br />
setPanelSync($panel);<br />
} else {<br />
$panel.addClass('profile-progress-block');<br />
placePanel($panel);<br />
<br />
if (!currentSummary && $panel.attr('data-progress-state') !== 'syncing') {<br />
setPanelSync($panel);<br />
}<br />
}<br />
<br />
return $('#progress-panel');<br />
}<br />
<br />
function clampPercent(value) {<br />
return Math.max(0, Math.min(100, value || 0));<br />
}<br />
<br />
function hasXpNotification(items) {<br />
if (!items || !items.length) return false;<br />
return items.some(function (item) {<br />
return item && item.type === 'xp' && parseInt(item.amount || 0, 10) > 0;<br />
});<br />
}<br />
<br />
function clearBarTimers() {<br />
[barTimerA, barTimerB, barTimerC].forEach(function (timer) {<br />
if (timer) clearTimeout(timer);<br />
});<br />
barTimerA = null;<br />
barTimerB = null;<br />
barTimerC = null;<br />
}<br />
<br />
function setBarInstant($fill, $gain, percent) {<br />
clearBarTimers();<br />
percent = clampPercent(percent);<br />
$fill.css({ transition: 'none', width: percent + '%' });<br />
$gain.css({ transition: 'none', left: '0%', width: '0%', opacity: 0 });<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
$fill.css({ transition: '' });<br />
$gain.css({ transition: '' });<br />
}<br />
<br />
function animateGain($fill, $gain, fromPercent, toPercent, levelChanged) {<br />
clearBarTimers();<br />
<br />
fromPercent = clampPercent(fromPercent);<br />
toPercent = clampPercent(toPercent);<br />
<br />
$fill.css({ transition: 'none', width: fromPercent + '%' });<br />
<br />
if (levelChanged) {<br />
var firstDelta = Math.max(0, 100 - fromPercent);<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: firstDelta > 0 ? 1 : 0,<br />
left: fromPercent + '%',<br />
width: firstDelta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 540ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: '100%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$fill.css({ transition: 'none', width: '0%' });<br />
$gain.css({ transition: 'none', opacity: toPercent > 0 ? 1 : 0, left: '0%', width: toPercent + '%' });<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
$fill.css({<br />
transition: 'width 460ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 860);<br />
<br />
barTimerC = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 1380);<br />
<br />
return;<br />
}<br />
<br />
var delta = Math.max(0, toPercent - fromPercent);<br />
<br />
if (delta <= 0.15) {<br />
setBarInstant($fill, $gain, toPercent);<br />
return;<br />
}<br />
<br />
$gain.css({<br />
transition: 'none',<br />
opacity: 1,<br />
left: fromPercent + '%',<br />
width: delta + '%'<br />
});<br />
<br />
if ($fill[0]) $fill[0].offsetHeight;<br />
<br />
barTimerA = setTimeout(function () {<br />
$fill.css({<br />
transition: 'width 560ms cubic-bezier(0.22, 0.7, 0.18, 1)',<br />
width: toPercent + '%'<br />
});<br />
}, 260);<br />
<br />
barTimerB = setTimeout(function () {<br />
$gain.css({ transition: 'opacity 180ms ease', opacity: 0 });<br />
}, 940);<br />
}<br />
<br />
function updatePanel(summary, options) {<br />
if (!summary) return;<br />
<br />
options = options || {};<br />
<br />
var $panel = ensurePanel();<br />
if (!$panel.length) {<br />
pendingSummary = $.extend({}, summary);<br />
pendingOptions = $.extend({}, options);<br />
return;<br />
}<br />
<br />
var level = summary.level || 1;<br />
var totalXp = summary.totalXp || 0;<br />
var xpIntoLevel = summary.xpIntoLevel || 0;<br />
var xpForNext = summary.xpForNextLevel || 1;<br />
var percent = clampPercent(summary.progressPercent);<br />
var isMaxLevel = !!summary.isMaxLevel;<br />
var dailyXp = summary.dailyXp || 0;<br />
var discoveries = summary.discoveryCount || 0;<br />
var title = summary.equippedTitle || summary.title || '';<br />
<br />
$panel.removeClass('is-syncing').toggleClass('is-max-level', isMaxLevel).attr('data-progress-state', 'ready');<br />
$panel.find('.progress-level-label').text((isMaxLevel ? 'MAX ' : 'LVL ') + level);<br />
$panel.find('.progress-total-xp').text(totalXp + ' XP');<br />
$panel.find('.progress-xp-next').text(isMaxLevel ? 'MAX LEVEL' : (xpIntoLevel + ' / ' + xpForNext + ' TO NEXT'));<br />
$panel.find('.progress-daily-xp').text('TODAY ' + dailyXp + ' XP');<br />
$panel.find('.progress-discovery-row').text('DISCOVERED ' + discoveries);<br />
<br />
var $title = $panel.find('.progress-title-row');<br />
if (title) {<br />
$title.text(title).prop('hidden', false);<br />
} else {<br />
$title.text('').prop('hidden', true);<br />
}<br />
<br />
var $fill = $panel.find('.progress-xp-fill');<br />
var $gain = $panel.find('.progress-xp-gain');<br />
var animate = !!options.animateGain && currentSummary && totalXp > (currentSummary.totalXp || 0);<br />
<br />
if (animate) {<br />
animateGain(<br />
$fill,<br />
$gain,<br />
clampPercent(currentSummary.progressPercent),<br />
percent,<br />
level !== (currentSummary.level || 1)<br />
);<br />
} else {<br />
setBarInstant($fill, $gain, percent);<br />
}<br />
<br />
currentSummary = $.extend({}, summary);<br />
pendingSummary = null;<br />
pendingOptions = null;<br />
}<br />
<br />
function requestSummary() {<br />
if (!isLoggedIn()) return;<br />
if (summaryRequested) return;<br />
<br />
summaryRequested = true;<br />
<br />
withApi(function (api) {<br />
api.get({<br />
action: 'progress_summary',<br />
format: 'json',<br />
formatversion: 2<br />
}).then(function (data) {<br />
var payload = data && data.progress_summary;<br />
if (payload && payload.available && payload.summary) {<br />
updatePanel(payload.summary, { animateGain: false });<br />
}<br />
}).always(function () {<br />
summaryRequested = false;<br />
});<br />
}, function () {<br />
summaryRequested = false;<br />
});<br />
}<br />
<br />
function queueNotifications(items) {<br />
if (!items || !items.length) return;<br />
<br />
items.forEach(function (item) {<br />
if (!item) return;<br />
notificationQueue.push(item);<br />
});<br />
<br />
showNextNotification();<br />
}<br />
<br />
function notificationText(item) {<br />
if (item.type === 'xp') {<br />
return '+' + (item.amount || 0) + ' XP · ' + (item.label || '문서 열람');<br />
}<br />
<br />
if (item.type === 'achievement') {<br />
var xp = item.amount ? ' · +' + item.amount + ' XP' : '';<br />
return '업적 달성 · ' + (item.label || '새 업적') + xp;<br />
}<br />
<br />
if (item.type === 'level') {<br />
return item.label || '레벨 상승';<br />
}<br />
<br />
return item.label || '보상 획득';<br />
}<br />
<br />
function showNextNotification() {<br />
if (notificationActive) return;<br />
if (!notificationQueue.length) return;<br />
<br />
notificationActive = true;<br />
var item = notificationQueue.shift();<br />
var $root = $('#progress-toast-root');<br />
<br />
if (!$root.length) {<br />
$('body').append('<div id="progress-toast-root"></div>');<br />
$root = $('#progress-toast-root');<br />
}<br />
<br />
var $toast = $('<div class="progress-toast"></div>');<br />
$toast.text(notificationText(item));<br />
$root.append($toast);<br />
<br />
requestAnimationFrame(function () {<br />
$toast.addClass('is-visible');<br />
});<br />
<br />
setTimeout(function () {<br />
$toast.removeClass('is-visible');<br />
setTimeout(function () {<br />
$toast.remove();<br />
notificationActive = false;<br />
showNextNotification();<br />
}, 220);<br />
}, 2600);<br />
}<br />
<br />
function applyPendingSummaryIfPossible() {<br />
if (!pendingSummary) return;<br />
updatePanel(pendingSummary, pendingOptions || { animateGain: false });<br />
}<br />
<br />
function handlePageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (!isRewardableClientSide()) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
var pageId = getPageId();<br />
if (handledPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
if (inFlightPageIds.has(pageId)) {<br />
requestSummary();<br />
return;<br />
}<br />
<br />
inFlightPageIds.add(pageId);<br />
<br />
withApi(function (api) {<br />
api.postWithToken('csrf', {<br />
action: 'progress_view',<br />
format: 'json',<br />
formatversion: 2,<br />
errorformat: 'plaintext',<br />
pageid: pageId<br />
}).then(function (data) {<br />
var payload = data && data.progress_view;<br />
if (!payload) return;<br />
<br />
handledPageIds.add(pageId);<br />
<br />
var animate = hasXpNotification(payload.notifications);<br />
<br />
if (payload.summary) {<br />
updatePanel(payload.summary, { animateGain: animate });<br />
}<br />
<br />
if (payload.notifications && payload.notifications.length) {<br />
queueNotifications(payload.notifications);<br />
}<br />
}).catch(function () {<br />
requestSummary();<br />
}).always(function () {<br />
inFlightPageIds.delete(pageId);<br />
});<br />
}, function () {<br />
inFlightPageIds.delete(pageId);<br />
requestSummary();<br />
});<br />
}<br />
<br />
function bindVisibilitySync() {<br />
if (visibilityBound) return;<br />
visibilityBound = true;<br />
<br />
document.addEventListener('visibilitychange', function () {<br />
if (document.visibilityState === 'visible') {<br />
requestSummary();<br />
}<br />
});<br />
}<br />
<br />
function bootProgressSystem(reason) {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
if (isRewardableClientSide()) {<br />
handlePageView();<br />
} else {<br />
requestSummary();<br />
}<br />
}<br />
<br />
function handleSpaPageView() {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
<br />
requestAnimationFrame(function () {<br />
setTimeout(function () {<br />
handlePageView();<br />
}, 80);<br />
});<br />
}<br />
<br />
function applySummary(summary, options) {<br />
updatePanel(summary, options || { animateGain: false });<br />
}<br />
<br />
window.ProgressSystemWebUi = {<br />
boot: bootProgressSystem,<br />
requestSummary: requestSummary,<br />
applySummary: applySummary,<br />
handlePageView: handlePageView,<br />
handleSpaPageView: handleSpaPageView,<br />
ensurePanel: ensurePanel<br />
};<br />
<br />
$(function () {<br />
bindVisibilitySync();<br />
bootProgressSystem('documentReady');<br />
});<br />
<br />
mw.hook('wikipage.content').add(function () {<br />
ensurePanel();<br />
applyPendingSummaryIfPossible();<br />
});<br />
})(mediaWiki, jQuery);</div>
Nxdsxn
https://clbiwiki.com/index.php?title=%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Layout.css&diff=2436
미디어위키:Layout.css
2026-06-01T20:36:11Z
<p>Nxdsxn: </p>
<hr />
<div>/* =========================================<br />
COASTLINE: BLACK ICE - Layout<br />
Core page shell / top nav / sidebars<br />
========================================= */<br />
<br />
/*<br />
설계 목적<br />
-----------------------------------------<br />
이 파일은 MediaWiki/Liberty 스킨 위에 올라가는 기본 레이아웃 뼈대를 담당한다.<br />
<br />
담당 범위:<br />
- 기본 Liberty 네비 숨김<br />
- 본문 컨테이너 폭과 배치<br />
- 본문 컨테이너 외곽 테마<br />
- 상단 네비바<br />
- 좌우 사이드바<br />
- 유저 박스와 사이드 링크 버튼<br />
- 하단 푸터<br />
<br />
현재 디자인 공식<br />
-----------------------------------------<br />
1. 전체 컨테이너는 각진 금속 패널로 처리한다.<br />
2. radius는 사용하지 않는다.<br />
3. 본문 컨테이너 표면은 #171717을 기준으로 한다.<br />
4. 상단 네비바와 좌우 사이드바도 같은 장치 계열로 맞춘다.<br />
5. 상단은 밝게, 좌우는 중간, 하단은 어둡게 잡는 north-light rule을 사용한다.<br />
6. 보라색 강조색(#854369, #d45aa2) 중심의 이전 테마는 제거한다.<br />
7. 공사선 모티프는 이 파일에서 쓰지 않는다.<br />
공사선은 프로젝트 트래커, 제작 로그, 정비 알림처럼<br />
"우리가 만들고 있음"이 전면에 오는 곳에서만 사용한다.<br />
<br />
주의:<br />
- 대문 내부 전용 구성은 MediaWiki:MainPage.css가 담당한다.<br />
- 카테고리 SVG 네비는 MediaWiki:CategoryNav.js + MainPage.css가 담당한다.<br />
- 언어 다이얼은 이 파일의 좌측 사이드바 언어 선택기 블록이 담당한다.<br />
*/<br />
<br />
/* -----------------------------------------<br />
0. 공통 색상 메모<br />
----------------------------------------- */<br />
<br />
/*<br />
주요 표면:<br />
#080808 : 깊은 내부 우물 / 화면 내부<br />
#101010 : 기본 프레임<br />
#141414 : 약간 밝은 패널 표면<br />
#171717 : 본문 컨테이너 / 상단 네비 / 사이드 장치 표면<br />
#1d1d1d : 타이틀바 / 활성 표면<br />
#252525 : 호버 표면<br />
<br />
주요 테두리:<br />
#555555 : 상단광<br />
#2b2b2b : 좌우 중간 테두리<br />
#050505 : 하단암 / 깊은 구분선<br />
#202020 : 내부 약한 구분선<br />
*/<br />
<br />
/* -----------------------------------------<br />
1. Liberty 기본 요소 정리<br />
----------------------------------------- */<br />
<br />
#liberty-bottombtn {<br />
display:none !important;<br />
}<br />
<br />
a[accesskey="t"] {<br />
display:none !important;<br />
}<br />
<br />
.Liberty .nav-wrapper {<br />
display:none !important;<br />
}<br />
<br />
.liberty-sidebar {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
2. 전체 배치<br />
----------------------------------------- */<br />
<br />
:root {<br />
--layout-shell-w:1880px;<br />
--layout-side-w:230px;<br />
--layout-gap:8px;<br />
}<br />
<br />
/* 상단 네비와 본문 행의 세로 간격도 좌우 사이드바 간격과 같은 값을 사용한다. */<br />
<br />
html {<br />
overflow-x:auto;<br />
}<br />
<br />
body {<br />
margin:0 !important;<br />
min-width:calc(var(--layout-shell-w) + 32px) !important;<br />
}<br />
<br />
#clbi-top-nav-wrap,<br />
.content-wrapper {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav-wrap {<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
}<br />
<br />
.content-wrapper {<br />
margin:var(--layout-gap) auto 0 !important;<br />
padding:0 0 16px 0 !important;<br />
display:grid !important;<br />
grid-template-columns:var(--layout-side-w) minmax(0, 1fr) var(--layout-side-w) !important;<br />
gap:var(--layout-gap) !important;<br />
align-items:start !important;<br />
justify-content:stretch !important;<br />
}<br />
<br />
#clbi-left-sidebar {<br />
grid-column:1;<br />
grid-row:1;<br />
}<br />
<br />
.container-fluid.liberty-content {<br />
grid-column:2;<br />
grid-row:1;<br />
padding-bottom:0 !important;<br />
margin:0 !important;<br />
flex:none !important;<br />
width:auto !important;<br />
max-width:none !important;<br />
min-width:0 !important;<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
#clbi-right-sidebar {<br />
grid-column:3;<br />
grid-row:1;<br />
}<br />
<br />
/* 줌/축소 화면에서도 좌우 사이드바를 문서 폭에 포함시키기 위해<br />
사이드바 숨김 반응형 규칙은 제거한다. */<br />
<br />
/* -----------------------------------------<br />
3. 본문 컨테이너<br />
----------------------------------------- */<br />
<br />
.liberty-content-main,<br />
.Liberty .content-wrapper .liberty-content .liberty-content-main,<br />
.liberty-content.content-tools-hidden .liberty-content-main {<br />
background:#1d1d1d !important;<br />
border:1px solid !important;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b !important;<br />
border-radius:0 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
inset 1px 0 0 rgba(255,255,255,0.012),<br />
inset -1px 0 0 rgba(0,0,0,0.38) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.liberty-content-main .mw-parser-output {<br />
background:transparent !important;<br />
}<br />
<br />
.liberty-content {<br />
border:none !important;<br />
box-shadow:none !important;<br />
border-radius:0 !important;<br />
background:transparent !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
4. 본문 헤더<br />
----------------------------------------- */<br />
<br />
.liberty-content-header {<br />
background:transparent !important;<br />
box-shadow:none !important;<br />
border:none !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
justify-content:space-between !important;<br />
padding:0 !important;<br />
height:auto !important;<br />
min-height:0 !important;<br />
border-radius:0 !important;<br />
}<br />
<br />
.liberty-content-header .content-tools {<br />
order:2 !important;<br />
flex-shrink:0 !important;<br />
padding-top:0 !important;<br />
padding-right:0 !important;<br />
}<br />
<br />
.liberty-content-header .title {<br />
order:1 !important;<br />
flex:1 !important;<br />
display:flex !important;<br />
align-items:flex-end !important;<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header h1 {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.liberty-content-header .contentSub {<br />
display:none !important;<br />
}<br />
<br />
<br />
<br />
/* -----------------------------------------<br />
4-A. MediaWiki CSS/JS 문서 인디케이터<br />
----------------------------------------- */<br />
<br />
.clbi-system-doc-indicator-row {<br />
margin:0 0 8px 0;<br />
padding:0;<br />
display:flex;<br />
justify-content:flex-end;<br />
align-items:flex-start;<br />
}<br />
<br />
.clbi-system-doc-indicator {<br />
min-width:320px;<br />
max-width:min(56%, 860px);<br />
padding:10px 14px 12px;<br />
background:#171717;<br />
border:1px solid !important;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
inset 1px 0 0 rgba(255,255,255,0.012),<br />
inset -1px 0 0 rgba(0,0,0,0.38) !important;<br />
background-image:linear-gradient(to bottom, rgba(255,255,255,0.020), rgba(0,0,0,0.08));<br />
}<br />
<br />
.clbi-system-doc-meta {<br />
display:flex;<br />
justify-content:flex-end;<br />
align-items:center;<br />
gap:8px;<br />
margin:0 0 6px 0;<br />
font-size:11px;<br />
line-height:1;<br />
letter-spacing:0.08em;<br />
text-transform:uppercase;<br />
color:#8a8a8a;<br />
}<br />
<br />
.clbi-system-doc-label {<br />
color:#8a8a8a;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-system-doc-type {<br />
display:inline-flex;<br />
align-items:center;<br />
height:16px;<br />
padding:0 6px;<br />
background:#0d0d0d;<br />
border:1px solid #202020;<br />
color:#c8c8c8;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-system-doc-title {<br />
display:block;<br />
text-align:right;<br />
font-size:34px;<br />
line-height:1;<br />
font-weight:900;<br />
letter-spacing:0.01em;<br />
color:#e2e2e2;<br />
text-shadow:0 1px 0 rgba(0,0,0,0.78);<br />
word-break:break-word;<br />
}<br />
<br />
body.clbi-system-doc-page .liberty-content-header,<br />
body.clbi-system-doc-page .mw-page-title-main,<br />
body.clbi-system-doc-page .mw-page-title-main::after,<br />
body.clbi-system-doc-page .mw-page-title-namespace,<br />
body.clbi-system-doc-page .mw-page-title-separator,<br />
body.clbi-system-doc-page #firstHeading,<br />
body.clbi-system-doc-page .mw-first-heading {<br />
display:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
5. 페이지 전환 피드백<br />
----------------------------------------- */<br />
<br />
body::after {<br />
content:'';<br />
position:fixed;<br />
inset:0;<br />
background:rgba(0,0,0,0);<br />
transition:background 0.2s ease, opacity 0.2s ease;<br />
opacity:0;<br />
pointer-events:none;<br />
z-index:99999;<br />
}<br />
<br />
body.page-loading::after {<br />
background:rgba(0,0,0,0.5);<br />
opacity:1;<br />
}<br />
<br />
/* -----------------------------------------<br />
6. 좌우 사이드바 공통<br />
----------------------------------------- */<br />
<br />
#clbi-left-sidebar,<br />
#clbi-right-sidebar {<br />
position:relative;<br />
width:230px;<br />
z-index:1000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:8px;<br />
padding:0;<br />
flex-shrink:0;<br />
align-self:flex-start;<br />
}<br />
<br />
.clbi-left-box,<br />
.clbi-right-box {<br />
position:relative;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
overflow:hidden;<br />
padding:0 8px 8px;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010,<br />
0 6px 18px rgba(0,0,0,0.34);<br />
}<br />
<br />
.clbi-left-title,<br />
.clbi-right-title {<br />
min-height:34px;<br />
padding:0 2px;<br />
font-weight:700;<br />
font-size:12px;<br />
color:#e2e2e2;<br />
border:0;<br />
background:transparent;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:none;<br />
}<br />
<br />
.clbi-left-content,<br />
.clbi-right-content {<br />
margin:0;<br />
padding:8px;<br />
box-sizing:border-box;<br />
color:#c8c8c8;<br />
font-size:12px;<br />
line-height:1.65;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.clbi-right-content a,<br />
.clbi-left-content a {<br />
color:#c8c8c8 !important;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
<br />
.clbi-right-content a:not(.clbi-user-btn):hover,<br />
.clbi-left-content a:not(.clbi-user-btn):hover {<br />
color:#ffffff !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
7. 유저 박스<br />
----------------------------------------- */<br />
<br />
.profile-card-box {<br />
position:relative;<br />
overflow:hidden;<br />
background:#101010;<br />
}<br />
<br />
#clbi-user-avatar-wrap,<br />
#clbi-user-avatar-wrap.profile-identity-panel {<br />
position:relative;<br />
display:block;<br />
min-height:180px;<br />
margin:0;<br />
padding:0 8px;<br />
background:#1d1d1d;<br />
border:none;<br />
border-bottom:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.profile-avatar-stage {<br />
position:absolute;<br />
left:50%;<br />
top:50%;<br />
transform:translate(-50%, -50%);<br />
width:104px;<br />
height:104px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#2b2b2b<br />
#202020<br />
#101010<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.018),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
}<br />
<br />
.profile-avatar-stage::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
right:7px;<br />
top:7px;<br />
height:1px;<br />
background:rgba(255,255,255,0.026);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-avatar-stage::after {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
pointer-events:none;<br />
box-shadow:<br />
inset 1px 0 0 rgba(255,255,255,0.006),<br />
inset -1px 0 0 rgba(0,0,0,0.16);<br />
}<br />
<br />
#clbi-user-avatar {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
width:90px;<br />
height:90px;<br />
object-fit:cover;<br />
background:#070707;<br />
border:1px solid #101010;<br />
box-shadow:<br />
0 0 0 1px rgba(255,255,255,0.012);<br />
}<br />
<br />
#clbi-user-name {<br />
max-width:100%;<br />
margin-top:0;<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1.2;<br />
text-align:center;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
#clbi-user-name-row,<br />
#clbi-user-name-row.profile-name-row {<br />
position:absolute;<br />
left:8px;<br />
right:8px;<br />
top:calc(50% + 52px);<br />
bottom:0;<br />
width:auto;<br />
margin:0;<br />
min-height:0;<br />
line-height:1.2;<br />
text-align:center;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
}<br />
<br />
#clbi-user-name-row #clbi-user-name {<br />
display:inline-block;<br />
max-width:100%;<br />
margin-top:0;<br />
vertical-align:middle;<br />
color:#e2e2e2 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
#clbi-user-name-row.profile-name-row-guest #clbi-user-name {<br />
max-width:100%;<br />
}<br />
<br />
.profile-svg {<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
stroke:currentColor;<br />
fill:none;<br />
vertical-align:middle;<br />
}<br />
<br />
.clbi-svg-nav-icon {<br />
display:flex !important;<br />
align-items:center;<br />
justify-content:center;<br />
color:#e2e2e2;<br />
line-height:1;<br />
}<br />
<br />
.clbi-svg-nav-icon .profile-svg {<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
flex:0 0 16px;<br />
color:#e2e2e2 !important;<br />
line-height:1;<br />
}<br />
<br />
.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
}<br />
<br />
.profile-action-icon {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:15px;<br />
height:15px;<br />
color:#8a8a8a;<br />
pointer-events:none;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-icon .profile-svg {<br />
width:15px;<br />
height:15px;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-icon,<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-icon {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-icon {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-icon {<br />
color:#e0a199;<br />
}<br />
<br />
<br />
<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
}<br />
<br />
.profile-quick-actions {<br />
position:relative;<br />
display:grid;<br />
grid-template-columns:repeat(3, minmax(0, 1fr));<br />
gap:4px;<br />
margin:0 0 8px;<br />
overflow:visible;<br />
z-index:2;<br />
}<br />
<br />
.profile-quick-btn {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:100%;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
min-height:0;<br />
padding:0;<br />
box-sizing:border-box;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.profile-quick-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333;<br />
color:#ffffff;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-quick-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035);<br />
}<br />
<br />
.profile-quick-icon {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:22px;<br />
height:22px;<br />
line-height:1;<br />
color:currentColor;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-icon .profile-svg {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
}<br />
<br />
.profile-quick-tip {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
min-width:42px;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
}<br />
<br />
.profile-quick-btn:hover .profile-quick-tip,<br />
.profile-quick-btn:focus-visible .profile-quick-tip {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
/* -----------------------------------------<br />
9. 유저 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-user-btn-grid {<br />
display:grid;<br />
grid-template-columns:1fr;<br />
gap:4px;<br />
}<br />
<br />
.profile-divider {<br />
height:1px;<br />
margin:9px 7px;<br />
background:#202020;<br />
box-shadow:<br />
0 1px 0 rgba(255,255,255,0.018);<br />
}<br />
<br />
.profile-action-box {<br />
position:relative;<br />
margin:0 7px 7px;<br />
padding:3px !important;<br />
overflow:visible;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-sizing:border-box;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-action-box .clbi-user-btn {<br />
position:relative;<br />
display:grid !important;<br />
grid-template-columns:15px minmax(0,1fr) 12px !important;<br />
column-gap:7px !important;<br />
align-items:center !important;<br />
justify-content:stretch !important;<br />
width:100% !important;<br />
min-height:26px !important;<br />
height:26px !important;<br />
margin:0 0 4px !important;<br />
padding:0 7px !important;<br />
box-sizing:border-box !important;<br />
background:<br />
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%) !important;<br />
border:1px solid !important;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020 !important;<br />
color:#c8c8c8 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-align:left !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040) !important;<br />
overflow:hidden !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:last-child {<br />
margin-bottom:0 !important;<br />
}<br />
<br />
.profile-action-label {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
line-height:1;<br />
}<br />
<br />
.profile-action-arrow {<br />
position:relative;<br />
top:0;<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
justify-self:end;<br />
width:12px;<br />
height:12px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
pointer-events:none;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover {<br />
background:<br />
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%) !important;<br />
border-color:<br />
#444444<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.060),<br />
0 0 0 1px rgba(255,255,255,0.018) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:hover .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn:active {<br />
background:<br />
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%) !important;<br />
border-color:<br />
#050505<br />
#202020<br />
#333333<br />
#202020 !important;<br />
box-shadow:<br />
inset 1px 1px 3px rgba(0,0,0,0.82),<br />
inset -1px -1px 0 rgba(255,255,255,0.035) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout {<br />
color:#c88a80 !important;<br />
border-color:<br />
#3f3f3f<br />
#2a2020<br />
#181010<br />
#2a2020 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout .profile-action-arrow {<br />
color:#8b5f59;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover {<br />
background:<br />
linear-gradient(to bottom, #241615 0%, #1b1110 56%, #100908 100%) !important;<br />
border-color:<br />
#6a3933<br />
#3f2623<br />
#181010<br />
#3f2623 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn-logout:hover .profile-action-arrow {<br />
color:#e0a199;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active {<br />
background:<br />
linear-gradient(to bottom, #242424 0%, #1d1d1d 55%, #141414 100%) !important;<br />
border-color:<br />
#555555<br />
#333333<br />
#202020<br />
#333333 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.070),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 0 1px rgba(255,255,255,0.022) !important;<br />
}<br />
<br />
.profile-action-box .clbi-user-btn.clbi-user-btn-active .profile-action-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* 기본 유저 버튼: 프로필 액션 박스 밖에서는 기존 사이드 버튼 문법 유지 */<br />
.clbi-user-btn {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
height:24px !important;<br />
padding:0 6px !important;<br />
margin:0 !important;<br />
border-radius:0 !important;<br />
font-size:11px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
text-align:center !important;<br />
background:#141414 !important;<br />
border:1px solid #202020 !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.65) !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.clbi-user-btn:hover {<br />
background:#202020 !important;<br />
border-color:#333333 !important;<br />
color:#ffffff !important;<br />
}<br />
<br />
.clbi-user-btn-logout {<br />
border-color:#3f2623 !important;<br />
color:#c88a80 !important;<br />
}<br />
<br />
.clbi-user-btn-logout:hover {<br />
background:#1b1110 !important;<br />
border-color:#6a3933 !important;<br />
color:#e0a199 !important;<br />
}<br />
<br />
.clbi-user-btn.clbi-user-btn-active {<br />
background:#242424 !important;<br />
border-color:#555555 !important;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.055),<br />
inset 0 -1px 0 rgba(0,0,0,0.75) !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.4 우측 광고판 Ad(not really)<br />
----------------------------------------- */<br />
<br />
.right-billboard-box {<br />
position:relative;<br />
background:#1d1d1d;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-title {<br />
justify-content:flex-start;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
gap:4px;<br />
}<br />
<br />
.right-billboard-title-text {<br />
display:inline-flex;<br />
align-items:center;<br />
gap:4px;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-main,<br />
.right-billboard-title-note {<br />
display:inline-block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-title-note {<br />
opacity:.20;<br />
}<br />
<br />
.right-billboard-body {<br />
position:relative;<br />
margin:0;<br />
padding:7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-recess {<br />
position:relative;<br />
height:auto;<br />
min-height:0;<br />
box-sizing:border-box;<br />
padding:8px;<br />
background:<br />
linear-gradient(145deg, #050505 0%, #090909 45%, #030303 100%);<br />
border:1px solid;<br />
border-color:#202020 #101010 #050505 #101010;<br />
box-shadow:<br />
inset 0 9px 18px rgba(0,0,0,0.96),<br />
inset 0 -2px 3px rgba(255,255,255,0.024),<br />
inset 7px 0 16px rgba(0,0,0,0.88),<br />
inset -7px 0 16px rgba(0,0,0,0.88),<br />
0 0 0 1px rgba(255,255,255,0.018);<br />
overflow:hidden;<br />
}<br />
<br />
.right-billboard-recess::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:0;<br />
pointer-events:none;<br />
opacity:.10;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 100%),<br />
linear-gradient(to right, rgba(255,255,255,0.04) 0%, transparent 22%, transparent 100%);<br />
mix-blend-mode:screen;<br />
}<br />
<br />
.right-billboard-screen {<br />
position:relative;<br />
z-index:1;<br />
width:100%;<br />
height:352px;<br />
min-height:352px;<br />
display:block;<br />
line-height:0;<br />
overflow:hidden;<br />
background:#050505;<br />
border:1px solid #060606;<br />
border-radius:7px / 13px;<br />
box-shadow:<br />
inset 0 0 16px rgba(0,0,0,0.90),<br />
inset 0 0 38px rgba(0,0,0,0.74),<br />
0 0 0 1px rgba(255,255,255,0.026);<br />
}<br />
<br />
.right-billboard-image {<br />
border:0;<br />
background:#050505;<br />
}<br />
<br />
.right-billboard-image-base {<br />
position:relative;<br />
z-index:3;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:100%;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
filter:<br />
brightness(0.84)<br />
contrast(1.08)<br />
saturate(0.90);<br />
transform:none;<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-image-bloom,<br />
.right-billboard-slice {<br />
position:absolute;<br />
inset:0;<br />
display:block;<br />
width:100%;<br />
height:100%;<br />
max-width:none;<br />
max-height:none;<br />
object-fit:cover;<br />
object-position:center center;<br />
border:0;<br />
background:transparent;<br />
}<br />
<br />
.right-billboard-image-bloom {<br />
z-index:4;<br />
pointer-events:none;<br />
opacity:.36;<br />
mix-blend-mode:normal;<br />
filter:<br />
blur(7px)<br />
brightness(0.92)<br />
contrast(1.02)<br />
saturate(1.04);<br />
transform:scale(1.015);<br />
transform-origin:center center;<br />
}<br />
<br />
.right-billboard-slice {<br />
z-index:5;<br />
opacity:0;<br />
pointer-events:none;<br />
mix-blend-mode:screen;<br />
filter:<br />
brightness(0.96)<br />
contrast(1.18)<br />
saturate(0.82);<br />
transform:scale(1.035);<br />
transform-origin:center center;<br />
will-change:transform, opacity, clip-path, filter;<br />
}<br />
<br />
.right-billboard-slice-a {<br />
animation:right-billboard-slice-tear-a 4.7s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-b {<br />
animation:right-billboard-slice-tear-b 6.1s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-slice-c {<br />
animation:right-billboard-slice-tear-c 7.4s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-screen::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:20;<br />
pointer-events:none;<br />
border-radius:7px / 13px;<br />
background:<br />
radial-gradient(<br />
ellipse at 50% 50%,<br />
transparent 0%,<br />
transparent 60%,<br />
rgba(0,0,0,0.18) 78%,<br />
rgba(0,0,0,0.46) 100%<br />
),<br />
linear-gradient(<br />
to bottom,<br />
rgba(0,0,0,0.18) 0%,<br />
transparent 15%,<br />
transparent 82%,<br />
rgba(0,0,0,0.26) 100%<br />
),<br />
linear-gradient(<br />
to right,<br />
rgba(0,0,0,0.20) 0%,<br />
transparent 9%,<br />
transparent 91%,<br />
rgba(0,0,0,0.20) 100%<br />
),<br />
linear-gradient(<br />
105deg,<br />
transparent 0%,<br />
rgba(255,255,255,0.030) 18%,<br />
transparent 38%,<br />
transparent 100%<br />
);<br />
box-shadow:<br />
inset 0 0 20px rgba(255,255,255,0.018),<br />
inset 0 0 48px rgba(0,0,0,0.56);<br />
}<br />
<br />
.right-billboard-screen::after {<br />
content:"";<br />
position:absolute;<br />
inset:-70px 0;<br />
z-index:21;<br />
pointer-events:none;<br />
opacity:.20;<br />
background:<br />
repeating-linear-gradient(<br />
to bottom,<br />
rgba(255,255,255,0.080) 0px,<br />
rgba(255,255,255,0.080) 1px,<br />
transparent 2px,<br />
transparent 5px<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-scanlines-up 7s linear infinite;<br />
}<br />
<br />
.right-billboard-glitch {<br />
position:absolute;<br />
inset:0;<br />
z-index:22;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to bottom,<br />
transparent 0%,<br />
rgba(255,255,255,0.12) 48%,<br />
rgba(212,90,162,0.14) 50%,<br />
rgba(90,120,255,0.08) 52%,<br />
transparent 56%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-glitch-band 8.2s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-tear {<br />
position:absolute;<br />
inset:0;<br />
z-index:23;<br />
pointer-events:none;<br />
opacity:0;<br />
background:<br />
linear-gradient(<br />
to right,<br />
transparent 0%,<br />
rgba(120,180,255,0.07) 10%,<br />
rgba(255,255,255,0.11) 48%,<br />
rgba(212,90,162,0.08) 78%,<br />
transparent 100%<br />
);<br />
mix-blend-mode:screen;<br />
animation:right-billboard-soft-horizontal-tear 5.6s steps(1,end) infinite;<br />
}<br />
<br />
.right-billboard-empty {<br />
position:absolute;<br />
inset:0;<br />
z-index:8;<br />
display:none;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:5px;<br />
box-sizing:border-box;<br />
min-height:0;<br />
background:#050505;<br />
color:#626262;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-screen {<br />
min-height:352px;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-empty {<br />
display:flex;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-image,<br />
.right-billboard-box.is-empty .right-billboard-slice {<br />
display:none !important;<br />
}<br />
<br />
.right-billboard-empty-main {<br />
display:block;<br />
color:#8a8a8a;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:.7px;<br />
}<br />
<br />
.right-billboard-empty-sub {<br />
display:block;<br />
max-width:100%;<br />
color:#626262;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1.2;<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
<br />
<br />
.right-billboard-caption {<br />
position:absolute;<br />
left:50%;<br />
top:calc(100% + 4px);<br />
z-index:40;<br />
display:flex;<br />
flex-direction:column;<br />
align-items:center;<br />
justify-content:center;<br />
gap:0;<br />
width:max-content;<br />
min-width:42px;<br />
max-width:calc(100% - 8px);<br />
margin:0;<br />
padding:3px 6px 4px;<br />
box-sizing:border-box;<br />
background:#101010;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
color:#e2e2e2;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:center;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.035),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 4px 10px rgba(0,0,0,0.44);<br />
visibility:hidden;<br />
opacity:0;<br />
transform:translate(-50%, -1px);<br />
pointer-events:none;<br />
overflow:visible;<br />
}<br />
<br />
.right-billboard-box:hover .right-billboard-caption,<br />
.right-billboard-box:focus-within .right-billboard-caption {<br />
visibility:visible;<br />
opacity:1;<br />
transform:translate(-50%, 0);<br />
}<br />
<br />
.right-billboard-caption-line {<br />
display:block;<br />
max-width:100%;<br />
min-width:0;<br />
height:10px;<br />
line-height:10px;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.right-billboard-caption-line.is-gap {<br />
height:10px;<br />
line-height:10px;<br />
font-size:0;<br />
}<br />
<br />
.right-billboard-box.is-empty .right-billboard-caption {<br />
display:none;<br />
}<br />
<br />
@keyframes right-billboard-scanlines-up {<br />
from { transform:translateY(0); }<br />
to { transform:translateY(-70px); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-a {<br />
0%, 11%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
12% { opacity:.34; transform:translateX(-10px) scale(1.035); clip-path:inset(17% 0 78% 0); }<br />
13% { opacity:.20; transform:translateX(7px) scale(1.035); clip-path:inset(18% 0 77% 0); filter:hue-rotate(-8deg); }<br />
14% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
63% { opacity:.26; transform:translateX(6px) scale(1.035); clip-path:inset(24% 0 70% 0); }<br />
64% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-b {<br />
0%, 37%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
38% { opacity:.36; transform:translateX(12px) scale(1.035); clip-path:inset(43% 0 50% 0); }<br />
39% { opacity:.22; transform:translateX(-8px) scale(1.035); clip-path:inset(45% 0 48% 0); filter:hue-rotate(10deg) brightness(1.08); }<br />
40% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
78% { opacity:.30; transform:translateX(-11px) scale(1.035); clip-path:inset(51% 0 43% 0); }<br />
79% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-slice-tear-c {<br />
0%, 21%, 100% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
22% { opacity:.24; transform:translateX(-14px) scale(1.035); clip-path:inset(67% 0 25% 0); }<br />
23% { opacity:.16; transform:translateX(10px) scale(1.035); clip-path:inset(68% 0 23% 0); filter:contrast(1.25) brightness(1.06); }<br />
24% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
91% { opacity:.30; transform:translateX(10px) scale(1.035); clip-path:inset(73% 0 18% 0); }<br />
92% { opacity:0; transform:translateX(0) scale(1.035); clip-path:inset(0 0 100% 0); }<br />
}<br />
<br />
@keyframes right-billboard-soft-glitch-band {<br />
0%, 52%, 100% { opacity:0; transform:translateY(80%); }<br />
53% { opacity:.38; transform:translateY(36%); }<br />
54% { opacity:.14; transform:translateY(20%) skewX(-1deg); }<br />
55% { opacity:0; transform:translateY(-20%); }<br />
}<br />
<br />
@keyframes right-billboard-soft-horizontal-tear {<br />
0%, 68%, 100% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
69% { opacity:.28; transform:translateX(-10px); clip-path:inset(34% 0 58% 0); }<br />
70% { opacity:.16; transform:translateX(8px); clip-path:inset(37% 0 55% 0); }<br />
71% { opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0); }<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.right-billboard-slice-a,<br />
.right-billboard-slice-b,<br />
.right-billboard-slice-c,<br />
.right-billboard-screen::after,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
animation:none !important;<br />
}<br />
<br />
.right-billboard-slice,<br />
.right-billboard-glitch,<br />
.right-billboard-tear {<br />
opacity:0 !important;<br />
}<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
9.45 우측 사이트 정보<br />
----------------------------------------- */<br />
<br />
.site-info-sidebar {<br />
position:relative;<br />
background:#1d1d1d;<br />
}<br />
<br />
.site-info-title {<br />
justify-content:space-between;<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
}<br />
<br />
.site-info-title > span:first-child {<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-title-meta {<br />
flex:0 0 auto;<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
letter-spacing:.55px;<br />
line-height:1;<br />
white-space:nowrap;<br />
}<br />
<br />
.site-info-content {<br />
line-height:1.4;<br />
}<br />
<br />
.site-info-sidebar .policy-list {<br />
border-top:1px solid #202020;<br />
border-bottom:1px solid #202020;<br />
}<br />
<br />
.site-info-sidebar .policy-row {<br />
display:grid;<br />
grid-template-columns:minmax(0,1fr) 18px;<br />
align-items:center;<br />
gap:6px;<br />
height:24px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
font-size:10px;<br />
line-height:1.2;<br />
}<br />
<br />
.site-info-sidebar .policy-row:last-child {<br />
border-bottom:none;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover {<br />
background:#151515;<br />
}<br />
<br />
.site-info-sidebar .policy-row a {<br />
display:block;<br />
min-width:0;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#c8c8c8 !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover a {<br />
color:#ffffff !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
.site-info-sidebar .policy-mark {<br />
color:#8a8a8a;<br />
font-size:14px;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-align:right;<br />
}<br />
<br />
.site-info-sidebar .policy-row:hover .policy-mark {<br />
color:#ffffff;<br />
}<br />
<br />
.site-info-sidebar .social-strip {<br />
display:grid;<br />
grid-template-columns:repeat(4,1fr);<br />
gap:4px;<br />
margin-top:6px;<br />
}<br />
<br />
.site-info-sidebar .social-icon {<br />
display:block;<br />
aspect-ratio:1 / 1;<br />
min-width:0;<br />
}<br />
<br />
.site-info-sidebar .social-icon a {<br />
display:flex !important;<br />
align-items:center !important;<br />
justify-content:center !important;<br />
width:100% !important;<br />
height:100% !important;<br />
border:1px solid #202020 !important;<br />
background:#111111 !important;<br />
color:#c8c8c8 !important;<br />
font-size:10px !important;<br />
font-weight:700 !important;<br />
line-height:1 !important;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
.site-info-sidebar .social-icon a:hover {<br />
background:#1c1c1c !important;<br />
color:#ffffff !important;<br />
border-color:#3a3a3a !important;<br />
text-decoration:none !important;<br />
}<br />
<br />
/* -----------------------------------------<br />
9.5 왼쪽 언어 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-lang-box {<br />
position:relative;<br />
min-height:0;<br />
z-index:1002;<br />
overflow:hidden;<br />
}<br />
<br />
/* 언어 박스 내부 라벨 패널 표준<br />
- 외곽 검은 선은 만들지 않는다.<br />
- 광원과 그림자는 사이드 프레임과 같은 한 세트(#555555 / #101010)를 사용한다.<br />
- 텍스트가 내부선에 붙지 않도록 상하 3px 패딩을 기본값으로 둔다. */<br />
.clbi-left-lang-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-language {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-left-language-icon {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
}<br />
<br />
.clbi-left-language-icon .profile-svg {<br />
display:block;<br />
width:16px;<br />
height:16px;<br />
stroke:currentColor;<br />
}<br />
<br />
.clbi-left-lang-box .clbi-left-content {<br />
padding:2px;<br />
box-sizing:border-box;<br />
}<br />
<br />
.sidebar-lang-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.sidebar-lang-selector,<br />
.sidebar-lang-dial {<br />
position:relative;<br />
width:100%;<br />
padding:0;<br />
box-sizing:border-box;<br />
user-select:none;<br />
touch-action:pan-y;<br />
outline:none;<br />
}<br />
<br />
.sidebar-lang-dial-stage {<br />
--lang-fan-half:99px;<br />
position:relative;<br />
width:100%;<br />
height:146px;<br />
margin:0;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
border-radius:0;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-fan {<br />
position:absolute;<br />
left:50%;<br />
top:2px;<br />
z-index:2;<br />
width:198px;<br />
height:147px;<br />
transform:translateX(-50%);<br />
overflow:visible;<br />
touch-action:pan-y;<br />
cursor:grab;<br />
pointer-events:auto;<br />
}<br />
<br />
.sidebar-lang-fan:active,<br />
.sidebar-lang-selector.is-dragging .sidebar-lang-fan,<br />
.sidebar-lang-selector.is-spinning .sidebar-lang-fan {<br />
cursor:grabbing;<br />
}<br />
<br />
.sidebar-lang-fan-svg {<br />
display:block;<br />
width:198px;<br />
height:147px;<br />
overflow:visible;<br />
shape-rendering:geometricPrecision;<br />
}<br />
<br />
.sidebar-lang-wheel-rotor {<br />
transform-origin:101px 119px;<br />
transform-box:view-box;<br />
will-change:transform;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-selector.is-snapping .sidebar-lang-wheel-rotor {<br />
transition:transform 210ms cubic-bezier(.17,.84,.22,1);<br />
}<br />
<br />
.sidebar-lang-shell {<br />
fill:#080808;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft,<br />
.sidebar-lang-inner-shadow-hard {<br />
fill:none;<br />
stroke:#000000;<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-soft {<br />
stroke-width:16;<br />
opacity:.34;<br />
filter:url(#clbi-sidebar-language-shadow-blur);<br />
}<br />
<br />
.sidebar-lang-inner-shadow-hard {<br />
stroke-width:6;<br />
opacity:.22;<br />
}<br />
<br />
.sidebar-lang-sector-group {<br />
pointer-events:auto;<br />
cursor:pointer;<br />
}<br />
<br />
.sidebar-lang-sector {<br />
fill:#101010;<br />
stroke:#181818;<br />
stroke-width:1;<br />
vector-effect:non-scaling-stroke;<br />
cursor:pointer;<br />
transition:none;<br />
}<br />
<br />
.sidebar-lang-sector-group:hover .sidebar-lang-sector,<br />
.sidebar-lang-sector:hover,<br />
.sidebar-lang-sector.is-center,<br />
.sidebar-lang-sector.is-far {<br />
fill:#101010;<br />
stroke:#181818;<br />
}<br />
<br />
.sidebar-lang-sector-label {<br />
pointer-events:none;<br />
text-anchor:middle;<br />
dominant-baseline:middle;<br />
paint-order:stroke;<br />
stroke:#050505;<br />
stroke-width:2px;<br />
stroke-linejoin:round;<br />
font-size:9px !important;<br />
font-weight:700 !important;<br />
letter-spacing:.15px;<br />
fill:#c8c8c8;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-sector-name {<br />
display:none;<br />
}<br />
<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-center .sidebar-lang-sector-name,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-label,<br />
.sidebar-lang-sector-group.is-neighbor .sidebar-lang-sector-name {<br />
fill:inherit;<br />
}<br />
<br />
.sidebar-lang-fixed-depth,<br />
.sidebar-lang-fixed-focus,<br />
.sidebar-lang-rim {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-fixed-depth {<br />
fill:url(#clbi-sidebar-language-fixed-depth);<br />
opacity:1;<br />
}<br />
<br />
.sidebar-lang-fixed-focus {<br />
fill:rgba(255,255,255,0.020);<br />
stroke:rgba(255,255,255,0.020);<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-rim {<br />
fill:none;<br />
stroke:#202020;<br />
stroke-width:1;<br />
}<br />
<br />
.sidebar-lang-fixed-pointer {<br />
pointer-events:none;<br />
clip-path:url(#clbi-sidebar-language-fan-clip);<br />
}<br />
<br />
.sidebar-lang-pointer-line {<br />
stroke:#b94a3c;<br />
stroke-width:2;<br />
stroke-linecap:square;<br />
opacity:.94;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-pointer-triangle {<br />
fill:#b94a3c;<br />
stroke:#050505;<br />
stroke-width:1;<br />
stroke-linejoin:miter;<br />
vector-effect:non-scaling-stroke;<br />
}<br />
<br />
.sidebar-lang-apply {<br />
position:absolute;<br />
left:50%;<br />
top:93px;<br />
z-index:5;<br />
width:52px;<br />
height:53px;<br />
margin:0;<br />
padding:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
border-radius:26px 26px 0 0;<br />
border:1px solid #050505;<br />
background:#1d1d1d;<br />
color:#e2e2e2;<br />
cursor:pointer;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
overflow:visible;<br />
transition:none !important;<br />
}<br />
<br />
.sidebar-lang-apply::before,<br />
.sidebar-lang-apply::after {<br />
content:none;<br />
}<br />
<br />
.sidebar-lang-apply:hover {<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#ffffff;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply:active {<br />
transform:translateX(-50%) translateY(1px);<br />
background:#101010;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.sidebar-lang-apply.is-disabled,<br />
.sidebar-lang-apply.is-disabled:hover,<br />
.sidebar-lang-apply.is-disabled:active {<br />
transform:translateX(-50%);<br />
border-color:#050505;<br />
background:#1d1d1d;<br />
color:#626262;<br />
cursor:default;<br />
opacity:1;<br />
box-shadow:<br />
0 0 0 2px #080808,<br />
0 0 0 4px #1d1d1d,<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.sidebar-lang-apply-mark {<br />
position:relative;<br />
z-index:1;<br />
display:block;<br />
font-size:20px;<br />
font-weight:700;<br />
line-height:1;<br />
transform:translateY(3px);<br />
}<br />
<br />
.sidebar-lang-status-panel {<br />
position:absolute;<br />
bottom:5px;<br />
width:69px;<br />
height:25px;<br />
z-index:4;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
padding:3px 5px;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8;<br />
text-align:center;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
pointer-events:none;<br />
}<br />
<br />
.sidebar-lang-status-left {<br />
left:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-right {<br />
right:calc(50% - var(--lang-fan-half));<br />
}<br />
<br />
.sidebar-lang-status-value {<br />
display:block;<br />
width:100%;<br />
min-width:0;<br />
color:#f0f0f0;<br />
font-family:inherit !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
}<br />
<br />
.sidebar-lang-status-right .sidebar-lang-status-value {<br />
font-size:8px;<br />
letter-spacing:.12px;<br />
}<br />
<br />
.sidebar-lang-status-right.is-ready .sidebar-lang-status-value {<br />
color:#f0f0f0;<br />
}<br />
<br />
.sidebar-lang-status-right.is-current .sidebar-lang-status-value {<br />
color:#c8c8c8;<br />
}<br />
<br />
.sidebar-lang-status-right.is-locked .sidebar-lang-status-value {<br />
color:#8a8a8a;<br />
}<br />
<br />
<br />
/* -----------------------------------------<br />
10. 왼쪽 뉴스 박스<br />
----------------------------------------- */<br />
<br />
.clbi-left-news-box {<br />
position:relative;<br />
min-height:0;<br />
overflow:hidden;<br />
}<br />
<br />
/* 뉴스 박스 타이틀은 언어 박스에서 확정한 내부 라벨 패널 표준을 따른다.<br />
- 컨테이너 상단 기준: 위 4px, 아래 3px<br />
- 외곽 검은 선 없음<br />
- 광원/그림자는 #555555 / #101010 한 세트만 사용 */<br />
.clbi-left-news-box > .clbi-left-title {<br />
min-height:0;<br />
height:auto;<br />
margin:4px 0 3px;<br />
padding:3px 7px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
display:flex;<br />
align-items:center;<br />
gap:6px;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
#clbi-title-left-news {<br />
display:inline-flex;<br />
align-items:center;<br />
height:100%;<br />
color:#e2e2e2;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0;<br />
}<br />
<br />
.news-title-icon,<br />
.news-title-icon.sidebar-title-svg {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:16px;<br />
height:16px;<br />
font-size:13px;<br />
line-height:1;<br />
color:#e2e2e2 !important;<br />
flex:0 0 16px;<br />
vertical-align:middle;<br />
}<br />
<br />
.news-title-icon .profile-svg,<br />
.news-title-icon.sidebar-title-svg .profile-svg {<br />
width:16px;<br />
height:16px;<br />
display:block;<br />
stroke:currentColor;<br />
}<br />
<br />
/* 뉴스 컨텐츠 슬롯은 언어 박스와 같은 3px 내부 기준을 따른다. */<br />
.clbi-news-box {<br />
position:relative;<br />
padding:3px !important;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
background:#080808;<br />
}<br />
<br />
/* 섹션 타이틀: 컨텐츠 슬롯 내부의 라벨 패널 */<br />
.news-feed-title {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
height:auto;<br />
min-height:22px;<br />
margin:0 0 2px 0;<br />
padding:3px 7px 3px 16px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.55px;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-feed-title::before {<br />
content:"";<br />
position:absolute;<br />
left:7px;<br />
top:50%;<br />
width:4px;<br />
height:8px;<br />
transform:translateY(-50%);<br />
background:#c8c8c8;<br />
box-shadow:1px 1px 0 #050505;<br />
opacity:0.85;<br />
}<br />
<br />
#clbi-left-news-changelog-title {<br />
margin-top:0;<br />
}<br />
<br />
#clbi-left-news-recent-title {<br />
margin-top:2px;<br />
}<br />
<br />
/* 섹션 본체는 별도 프레임을 만들지 않는 배치 래퍼다. */<br />
.news-left-changelog-feed,<br />
.news-left-recent-feed {<br />
background:transparent;<br />
border:0;<br />
box-shadow:none;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-left-changelog-feed {<br />
padding:0;<br />
}<br />
<br />
.news-left-recent-feed {<br />
padding:0;<br />
color:#9a9a9a;<br />
font-size:11px;<br />
line-height:1.55;<br />
}<br />
<br />
.news-divider {<br />
display:none;<br />
}<br />
<br />
/* 버튼형 항목: 단색 표면 + 최외곽 검은 선 + 동일 광원 세트 */<br />
.news-post-item,<br />
.news-recent-item {<br />
position:relative;<br />
display:grid !important;<br />
align-items:center;<br />
gap:6px;<br />
margin:0 0 2px;<br />
box-sizing:border-box;<br />
background:#1d1d1d;<br />
border:1px solid #050505;<br />
color:#c8c8c8 !important;<br />
overflow:hidden;<br />
text-decoration:none !important;<br />
cursor:pointer;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
}<br />
<br />
.news-post-item {<br />
grid-template-columns:minmax(0,1fr) auto;<br />
min-height:26px;<br />
padding:0 6px;<br />
}<br />
<br />
.news-recent-item {<br />
grid-template-columns:28px minmax(0,1fr) auto;<br />
min-height:36px;<br />
margin:0 0 2px;<br />
padding:4px 6px 4px 5px;<br />
}<br />
<br />
.news-post-item:last-child,<br />
.news-recent-item:last-child {<br />
margin-bottom:0;<br />
}<br />
<br />
.news-post-item:hover,<br />
.news-recent-item:hover {<br />
background:#1d1d1d;<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-item:active,<br />
.news-recent-item:active {<br />
background:#101010;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-recent-avatar {<br />
display:block;<br />
width:24px;<br />
height:24px;<br />
object-fit:cover;<br />
object-position:center;<br />
background:#070707;<br />
border:1px solid #050505;<br />
box-shadow:<br />
inset 0 1px 0 #555555,<br />
inset -1px 0 0 #555555,<br />
inset 1px 0 0 #101010,<br />
inset 0 -1px 0 #101010;<br />
box-sizing:border-box;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-avatar {<br />
border-color:#050505;<br />
}<br />
<br />
.news-recent-main {<br />
min-width:0;<br />
display:flex;<br />
flex-direction:column;<br />
justify-content:center;<br />
gap:1px;<br />
}<br />
<br />
.news-post-title-wrap,<br />
.news-recent-title-wrap {<br />
min-width:0;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
-webkit-mask-image:linear-gradient(to right, black 88%, transparent 100%);<br />
}<br />
<br />
.news-post-title-wrap {<br />
display:flex;<br />
align-items:center;<br />
}<br />
<br />
.news-post-title,<br />
.news-recent-title {<br />
display:inline-block;<br />
max-width:none;<br />
overflow:visible;<br />
color:#e2e2e2 !important;<br />
font-size:12px;<br />
font-weight:700;<br />
line-height:1.18;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-post-item:hover .news-post-title,<br />
.news-recent-item:hover .news-recent-title {<br />
color:#ffffff !important;<br />
}<br />
<br />
.news-post-arrow {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:12px;<br />
height:12px;<br />
margin-left:5px;<br />
color:#8a8a8a;<br />
font-size:11px;<br />
line-height:1;<br />
vertical-align:-1px;<br />
flex:0 0 auto;<br />
}<br />
<br />
.news-post-item:hover .news-post-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
.news-recent-meta {<br />
display:flex;<br />
align-items:center;<br />
min-width:0;<br />
height:10px;<br />
line-height:1;<br />
}<br />
<br />
.news-recent-user {<br />
display:block !important;<br />
min-width:0;<br />
max-width:100%;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
white-space:nowrap;<br />
color:#7a7a7a !important;<br />
font-size:8.5px;<br />
font-weight:700;<br />
line-height:1;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.news-recent-item:hover .news-recent-user {<br />
color:#b0b0b0 !important;<br />
}<br />
<br />
/* 항목 내부의 작은 상태 버튼: 외곽선 없이 우물 방향 내부선만 사용 */<br />
.news-post-tag,<br />
.news-recent-time {<br />
display:inline-flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:16px;<br />
min-width:34px;<br />
padding:0 4px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:0;<br />
color:#c8c8c8 !important;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item:hover .news-post-tag,<br />
.news-recent-item:hover .news-recent-time {<br />
background:#101010;<br />
color:#e2e2e2 !important;<br />
}<br />
<br />
.news-recent-item:active .news-recent-time {<br />
background:#080808;<br />
color:#c8c8c8 !important;<br />
box-shadow:<br />
inset 0 1px 0 #101010,<br />
inset -1px 0 0 #101010,<br />
inset 1px 0 0 #555555,<br />
inset 0 -1px 0 #555555;<br />
}<br />
<br />
.news-post-item *,<br />
.news-recent-item * {<br />
pointer-events:none;<br />
}<br />
<br />
/* -----------------------------------------<br />
12. 왼쪽 목차<br />
----------------------------------------- */<br />
<br />
#side-toc-box .toc-sidebar-content {<br />
padding:6px 8px 8px;<br />
}<br />
<br />
.generated-toc {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none !important;<br />
}<br />
<br />
.generated-toc li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
}<br />
<br />
.generated-toc a {<br />
display:block !important;<br />
height:23px;<br />
line-height:23px;<br />
padding:0 2px;<br />
border-bottom:1px solid #202020;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
text-decoration:none !important;<br />
text-shadow:1px 1px 0 #000;<br />
box-sizing:border-box;<br />
overflow:hidden;<br />
}<br />
<br />
.generated-toc li:first-child a {<br />
border-top:1px solid #202020;<br />
}<br />
<br />
.generated-toc a:hover {<br />
background:#101010;<br />
color:#ffffff !important;<br />
}<br />
<br />
.generated-toc .toc-level-3 a {<br />
padding-left:12px;<br />
font-weight:600;<br />
color:#9f9f9f !important;<br />
}<br />
<br />
.toc-scroll-wrap {<br />
display:block;<br />
position:relative;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-text {<br />
display:inline-block;<br />
white-space:nowrap;<br />
}<br />
<br />
.toc-scroll-wrap.is-scrolling::after {<br />
content:"";<br />
position:absolute;<br />
top:0;<br />
right:0;<br />
bottom:0;<br />
width:18px;<br />
pointer-events:none;<br />
background:linear-gradient(to right, transparent, #080808);<br />
}<br />
<br />
/* -----------------------------------------<br />
14. 하단 푸터<br />
----------------------------------------- */<br />
<br />
footer,<br />
.liberty-footer {<br />
display:none !important;<br />
}<br />
<br />
/* =========================================<br />
15. 상단 네비게이션 바<br />
========================================= */<br />
<br />
/*<br />
상단 네비바 공식<br />
-----------------------------------------<br />
- 전체는 하나의 각진 조작 패널이다.<br />
- 탭 하나하나는 독립 버튼 외장보다 패널 내부 구획에 가깝다.<br />
- radius는 사용하지 않는다.<br />
- 보라색 테마를 쓰지 않는다.<br />
- 검색창도 같은 금속 인풋으로 정리한다.<br />
*/<br />
<br />
#clbi-top-nav-wrap {<br />
width:var(--layout-shell-w) !important;<br />
max-width:var(--layout-shell-w) !important;<br />
min-width:var(--layout-shell-w) !important;<br />
margin:0 auto !important;<br />
padding:var(--layout-gap) 0 0 !important;<br />
box-sizing:border-box !important;<br />
}<br />
<br />
#clbi-top-nav {<br />
position:relative;<br />
width:100%;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:<br />
#555555<br />
#2b2b2b<br />
#050505<br />
#2b2b2b;<br />
border-radius:0;<br />
overflow:hidden;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.70),<br />
0 6px 18px rgba(0,0,0,0.34);<br />
margin-bottom:0;<br />
}<br />
<br />
#clbi-top-nav-main {<br />
position:relative;<br />
display:flex;<br />
align-items:stretch;<br />
width:100%;<br />
min-height:38px;<br />
}<br />
<br />
#clbi-top-nav-logo {<br />
display:flex;<br />
align-items:center;<br />
padding:0 8px;<br />
flex-shrink:0;<br />
}<br />
<br />
#clbi-top-nav-logo img {<br />
height:36px;<br />
width:auto;<br />
display:block;<br />
}<br />
<br />
/* -----------------------------------------<br />
16. 상단 네비 탭<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-tabs {<br />
display:flex;<br />
align-items:stretch;<br />
flex:1;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-top-nav-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:8px;<br />
width:120px;<br />
min-height:38px;<br />
flex-shrink:0;<br />
padding:0;<br />
background:transparent;<br />
border-left:1px solid transparent;<br />
border-right:1px solid #202020;<br />
cursor:pointer;<br />
transition:<br />
background 0.12s,<br />
border-color 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
user-select:none;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
color:#e2e2e2 !important;<br />
overflow:hidden;<br />
box-sizing:border-box;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-top-nav-item:hover {<br />
min-height:38px;<br />
background:#1d1d1d;<br />
border-left-color:#333333;<br />
border-right-color:#333333;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.045),<br />
inset 0 -1px 0 rgba(0,0,0,0.65);<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active {<br />
background:#242424;<br />
border-left-color:#444444;<br />
border-right-color:#444444;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.050),<br />
inset 0 -1px 0 rgba(0,0,0,0.70);<br />
}<br />
<br />
.clbi-tnav-icon {<br />
display:block;<br />
width:22px;<br />
height:22px;<br />
object-fit:contain;<br />
flex:0 0 22px;<br />
image-rendering:pixelated;<br />
opacity:0.88;<br />
align-self:center;<br />
filter:grayscale(0.18) contrast(1.05);<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-icon,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-icon {<br />
opacity:1;<br />
filter:grayscale(0) contrast(1.08);<br />
}<br />
<br />
/* -----------------------------------------<br />
17. 언어 버튼<br />
----------------------------------------- */<br />
<br />
.clbi-tnav-lang {<br />
flex-direction:column;<br />
justify-content:center;<br />
align-items:center;<br />
width:54px;<br />
min-height:38px;<br />
gap:1px;<br />
padding:4px 0;<br />
border-left:1px solid transparent;<br />
}<br />
<br />
.clbi-tnav-lang-code {<br />
font-size:11px;<br />
font-weight:700;<br />
color:#e2e2e2;<br />
letter-spacing:0;<br />
}<br />
<br />
.clbi-tnav-lang .clbi-tnav-arrow {<br />
font-size:9px;<br />
color:#8a8a8a;<br />
width:8px;<br />
text-align:center;<br />
flex-shrink:0;<br />
}<br />
<br />
.clbi-tnav-lang:hover {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang.clbi-tnav-active {<br />
border-left-color:transparent !important;<br />
}<br />
<br />
.clbi-tnav-lang-bottom {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
gap:3px;<br />
line-height:1;<br />
width:100%;<br />
}<br />
<br />
.clbi-tnav-label {<br />
position:relative;<br />
z-index:1;<br />
display:inline-flex;<br />
align-items:center;<br />
height:22px;<br />
line-height:22px;<br />
font-size:13px;<br />
font-weight:700;<br />
}<br />
<br />
.clbi-tnav-arrow {<br />
position:relative;<br />
z-index:1;<br />
font-size:12px;<br />
color:#8a8a8a;<br />
transition:color 0.12s;<br />
}<br />
<br />
.clbi-top-nav-item:hover .clbi-tnav-arrow,<br />
.clbi-top-nav-item.clbi-tnav-active .clbi-tnav-arrow {<br />
color:#ffffff;<br />
}<br />
<br />
/* -----------------------------------------<br />
18. 상단 검색<br />
----------------------------------------- */<br />
<br />
#clbi-top-nav-search {<br />
position:absolute;<br />
left:50%;<br />
top:0;<br />
bottom:0;<br />
transform:translateX(-50%);<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
pointer-events:none;<br />
}<br />
<br />
#clbi-top-search-input {<br />
width:240px;<br />
height:26px;<br />
background:#070707;<br />
border:1px solid #202020;<br />
color:#e2e2e2;<br />
padding:0 10px;<br />
border-radius:0;<br />
font-size:11px;<br />
box-sizing:border-box;<br />
outline:none;<br />
pointer-events:all;<br />
transition:border-color 0.12s, width 0.2s, background 0.12s;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.55);<br />
}<br />
<br />
#clbi-top-search-input:focus {<br />
border-color:#555555;<br />
background:#0c0c0c;<br />
width:320px;<br />
}<br />
<br />
#clbi-top-nav-right {<br />
margin-left:auto;<br />
display:flex;<br />
align-items:stretch;<br />
border-left:1px solid #202020;<br />
}<br />
<br />
/* -----------------------------------------<br />
19. 세계관 펼침 영역<br />
----------------------------------------- */<br />
<br />
#clbi-sub-worldbuilding {<br />
box-sizing:border-box;<br />
width:100%;<br />
height:0;<br />
overflow:hidden;<br />
border-top:0 solid #050505;<br />
background:#080808;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 180ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding.worldbuilding-open {<br />
height:38px;<br />
border-top-width:1px;<br />
transition:<br />
height 180ms ease,<br />
border-top-width 0ms linear 0ms;<br />
}<br />
<br />
#clbi-sub-worldbuilding-inner {<br />
height:38px;<br />
overflow:hidden;<br />
}<br />
<br />
.clbi-tnav-sub-list {<br />
display:flex;<br />
align-items:stretch;<br />
flex-wrap:nowrap;<br />
height:38px;<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
.clbi-tnav-sub-item {<br />
position:relative;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
height:38px;<br />
padding:0 15px 1px 15px;<br />
background:transparent;<br />
color:#c8c8c8 !important;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-decoration:none !important;<br />
box-sizing:border-box;<br />
transition:<br />
background 0.12s,<br />
color 0.12s,<br />
box-shadow 0.12s;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.clbi-tnav-sub-item::after {<br />
content:"";<br />
position:absolute;<br />
top:6px;<br />
right:0;<br />
bottom:6px;<br />
width:1px;<br />
background:#202020;<br />
pointer-events:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:last-child::after {<br />
display:none;<br />
}<br />
<br />
.clbi-tnav-sub-item:hover {<br />
background:#151515;<br />
color:#ffffff !important;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.030),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
}<br />
<br />
/* 상단 네비: hover/active 인접 경계선 중복 방지 */<br />
.clbi-top-nav-item:hover + .clbi-top-nav-item.clbi-tnav-active {<br />
border-left-color:transparent;<br />
}<br />
<br />
.clbi-top-nav-item.clbi-tnav-active + .clbi-top-nav-item:hover {<br />
border-left-color:transparent;<br />
}<br />
<br />
/* =========================================<br />
Progress System UI<br />
MediaWiki:Layout.css controlled frontend<br />
========================================= */<br />
/* =========================================<br />
Progress System<br />
========================================= */<br />
<br />
.profile-progress-block {<br />
--xp-base-a:#5f9f68;<br />
--xp-base-b:#9acb7a;<br />
--xp-gain-a:#238c84;<br />
--xp-gain-b:#54c7bb;<br />
--xp-glow:rgba(35,140,132,0.20);<br />
position:relative;<br />
margin:7px 7px 0;<br />
padding:6px;<br />
box-sizing:border-box;<br />
background:#080808;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#050505<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.020),<br />
inset 0 -1px 0 rgba(0,0,0,0.58);<br />
}<br />
<br />
.profile-progress-block.is-max-level {<br />
--xp-base-a:#b58a3a;<br />
--xp-base-b:#f0ce75;<br />
--xp-gain-a:#d9aa42;<br />
--xp-gain-b:#fff0a8;<br />
--xp-glow:rgba(224,190,104,0.30);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-level-label {<br />
color:#f0ce75;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 7px rgba(224,190,104,0.28);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-total-xp {<br />
color:#e0be68;<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-bar {<br />
border-color:#4a3b18;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.62),<br />
0 0 6px rgba(224,190,104,0.18);<br />
}<br />
<br />
.profile-progress-block.is-max-level .progress-xp-next {<br />
color:#e0be68;<br />
}<br />
<br />
.progress-panel-fallback-body {<br />
padding:0 !important;<br />
}<br />
<br />
.progress-title-row {<br />
min-height:16px;<br />
margin:0 0 6px;<br />
padding:0 6px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
box-sizing:border-box;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
color:#c8c8c8;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
.progress-title-row[hidden] {<br />
display:none !important;<br />
}<br />
<br />
.progress-level-row,<br />
.progress-sub-row {<br />
display:flex;<br />
align-items:center;<br />
justify-content:space-between;<br />
gap:6px;<br />
min-width:0;<br />
}<br />
<br />
.progress-level-row {<br />
margin-bottom:5px;<br />
}<br />
<br />
.progress-level-label {<br />
color:#e2e2e2;<br />
font-size:14px;<br />
font-weight:700;<br />
line-height:1;<br />
letter-spacing:0.2px;<br />
text-shadow:<br />
1px 1px 0 #000,<br />
0 0 5px rgba(154,203,122,0.14);<br />
}<br />
<br />
.progress-total-xp {<br />
color:#b8c9b4;<br />
font-size:10px;<br />
font-weight:700;<br />
line-height:1;<br />
white-space:nowrap;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-xp-bar {<br />
position:relative;<br />
width:100%;<br />
height:10px;<br />
margin:0 0 5px;<br />
box-sizing:border-box;<br />
background:#070707;<br />
border:1px solid #202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.025),<br />
inset 0 -1px 0 rgba(0,0,0,0.60);<br />
overflow:hidden;<br />
isolation:isolate;<br />
}<br />
<br />
.progress-xp-bar::before {<br />
content:"";<br />
position:absolute;<br />
inset:0;<br />
z-index:4;<br />
pointer-events:none;<br />
background:<br />
linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 45%, rgba(0,0,0,0.18));<br />
}<br />
<br />
.progress-xp-fill,<br />
.progress-xp-gain {<br />
position:absolute;<br />
left:0;<br />
top:0;<br />
bottom:0;<br />
width:0;<br />
}<br />
<br />
.progress-xp-gain {<br />
z-index:1;<br />
opacity:0;<br />
background:linear-gradient(to bottom, var(--xp-gain-b) 0%, var(--xp-gain-a) 58%, #155c58 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.18),<br />
inset 0 -1px 0 rgba(0,0,0,0.46),<br />
0 0 5px var(--xp-glow);<br />
}<br />
<br />
.progress-xp-fill {<br />
z-index:2;<br />
background:linear-gradient(to bottom, var(--xp-base-b) 0%, var(--xp-base-a) 58%, #3f7346 100%);<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.24),<br />
inset 0 -1px 0 rgba(0,0,0,0.42);<br />
transition:width 260ms ease;<br />
}<br />
<br />
.progress-sub-row {<br />
margin-bottom:6px;<br />
}<br />
<br />
.progress-xp-next,<br />
.progress-daily-xp,<br />
.progress-discovery-row {<br />
color:#8a8a8a;<br />
font-size:9px;<br />
font-weight:700;<br />
line-height:1;<br />
text-shadow:1px 1px 0 #000;<br />
}<br />
<br />
.progress-daily-xp {<br />
white-space:nowrap;<br />
}<br />
<br />
.progress-discovery-row {<br />
height:18px;<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
background:#141414;<br />
border:1px solid;<br />
border-color:<br />
#333333<br />
#202020<br />
#181818<br />
#202020;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040);<br />
}<br />
<br />
#progress-toast-root {<br />
position:fixed;<br />
right:18px;<br />
bottom:18px;<br />
z-index:100000;<br />
display:flex;<br />
flex-direction:column;<br />
gap:6px;<br />
pointer-events:none;<br />
}<br />
<br />
.progress-toast {<br />
min-width:220px;<br />
max-width:320px;<br />
padding:8px 10px;<br />
box-sizing:border-box;<br />
background:#171717;<br />
border:1px solid;<br />
border-color:#555555 #2b2b2b #050505 #2b2b2b;<br />
color:#e2e2e2;<br />
font-size:11px;<br />
font-weight:700;<br />
line-height:1.35;<br />
text-shadow:1px 1px 0 #000;<br />
box-shadow:<br />
inset 0 1px 0 rgba(255,255,255,0.040),<br />
inset 0 -1px 0 rgba(0,0,0,0.72),<br />
0 6px 18px rgba(0,0,0,0.42);<br />
opacity:0;<br />
transform:translateY(8px);<br />
transition:opacity 160ms ease, transform 160ms ease;<br />
}<br />
<br />
.progress-toast.is-visible {<br />
opacity:1;<br />
transform:translateY(0);<br />
}<br />
<br />
/* -----------------------------------------<br />
Analog hover normalization<br />
----------------------------------------- */<br />
#clbi-top-nav .clbi-top-nav-item,<br />
#clbi-top-nav .clbi-top-nav-item *,<br />
#clbi-sub-worldbuilding .clbi-tnav-sub-item,<br />
#clbi-search-btn,<br />
.clbi-user-btn,<br />
.profile-action-box .clbi-user-btn,<br />
.profile-action-box .clbi-user-btn *,<br />
.profile-quick-btn,<br />
.profile-quick-btn *,<br />
.news-post-item,<br />
.news-post-item *,<br />
.news-recent-item,<br />
.news-recent-item *,<br />
.clbi-left-news-main,<br />
.clbi-left-news-main *,<br />
.clbi-link-btn,<br />
.clbi-link-box ul li a,<br />
#clbi-playlist-toggle,<br />
#clbi-notification-toggle {<br />
transition:none !important;<br />
}</div>
Nxdsxn