미디어위키:Components.css

/* =========================================
   COASTLINE: BLACK ICE - Components
   ========================================= */

/* 가짜 문단 */
.fake-h1 {
    display: block;
    font-family: 'BoldRound', sans-serif !important;
    font-size: 2em;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.fake-h2 {
    display: block;
    font-family: 'BoldRound', sans-serif !important;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

/* 툴팁 */
.tooltip-template-trigger {
    cursor: pointer;
    color: #722f37;
    user-select: none;
}
.tooltip-template {
    display: none;
    margin: 5px 0;
    border: 1px solid #854369;
    background: #1a1a1a;
    color: #000;
    padding: 12px;
    border-radius: 3px;
    text-align: left;
    user-select: text;
    position: absolute;
    z-index: 5;
}
.tooltip-template-trigger:hover { text-decoration: underline; }
.tooltip-template-trigger:hover + .tooltip-template { display: block; user-select: none; }
.tooltip-template-trigger:active + .tooltip-template { display: block; user-select: none; }
.tooltip-template:hover { display: block; }

/* 펼접 */
[id^="collapsible"] {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
[id^="collapsible"].folding-open {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 최근 변경 / 체인지로그 카드 ── */
.clbi-rc-card {
    display: block;
    padding: 9px 12px 8px;
    margin-bottom: 4px;
    background: linear-gradient(to bottom, #1a1a1a 0%, #141414 50%, #0f0f0f 100%);
    border: 1px solid #242424;
    border-top-color: #2e2e2e;
    border-radius: 3px;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s;
}

/* 도트 패턴 레이어 */
.clbi-rc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/index.php?title=특수:Redirect/file/gfx-halftone-001.png');
    background-repeat: repeat;
    background-size: 45px 45px;
    background-position: center center;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

/* 우하단 핑크 글로우 */
.clbi-rc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 100% 110%, rgba(133,67,105,0.07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.clbi-rc-card:last-child { margin-bottom: 0; }

.clbi-rc-card:hover {
    background: linear-gradient(to bottom, #202020 0%, #191919 50%, #131313 100%);
    border-color: #303030;
    border-top-color: #3a3a3a;
}

.clbi-rc-card:hover::before {
    opacity: 0.24;
}

.clbi-rc-card:hover::after {
    background: radial-gradient(ellipse at 100% 110%, rgba(133,67,105,0.13) 0%, transparent 60%);
}

.clbi-rc-card-title {
    display: block;
    color: #c8c8c8 !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
    transition: color 0.15s;
}

.clbi-rc-card:hover .clbi-rc-card-title { color: #e8e8e8 !important; }

.clbi-rc-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.clbi-rc-card-user {
    color: #5a2848;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    transition: color 0.15s;
}

.clbi-rc-card:hover .clbi-rc-card-user { color: #9a4070; }

.clbi-rc-card-time {
    color: #484848;
    font-size: 9px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.2px;
    transition: color 0.15s;
}

.clbi-rc-card:hover .clbi-rc-card-time { color: #888888; }

/* 최근 변경 */
.clbi-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 6px;
    position: relative;
}
.clbi-recent-title-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
}
.clbi-recent-title {
    display: inline-block;
    white-space: nowrap;
    color: #E2E2E2 !important;
    font-size: 12px;
    text-decoration: none;
}
.clbi-recent-title:hover { color: #d45aa2 !important; }
.clbi-recent-time {
    color: #854369;
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
@keyframes clbi-scroll {
    0%   { transform: translateX(0); }
    80%  { transform: translateX(var(--scroll-dist)); }
    81%  { transform: translateX(0); }
    100% { transform: translateX(0); }
}

/* 왼쪽 목차: 끝 지점에서 잠깐 머문 뒤 눈을 감고 뜨듯이 원위치로 복귀 */
@keyframes toc-scroll-blink-reset {
    0% {
        transform: translateX(0);
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    68% {
        transform: translateX(var(--scroll-dist));
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    80% {
        transform: translateX(var(--scroll-dist));
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    84% {
        transform: translateX(var(--scroll-dist));
        opacity: 0;
        clip-path: inset(48% 0 48% 0);
    }

    85% {
        transform: translateX(0);
        opacity: 0;
        clip-path: inset(48% 0 48% 0);
    }

    89% {
        transform: translateX(0);
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

/* 호버 애니메이션 */
.hover-gif-btn .gif-static,
.hover-gif-btn .gif-animated { transition: opacity 0.3s ease; }
.hover-gif-btn:not(:hover) .gif-animated { opacity: 0 !important; }
.hover-gif-btn:hover .gif-static { opacity: 0 !important; }
.hover-gif-btn:hover .gif-animated { opacity: 0.25 !important; }
.hover-gif-btn:hover .hover-flash-effect { animation: fast-flash 0.4s ease-out forwards; }
@keyframes fast-flash { 0% { opacity: 0.8; } 100% { opacity: 0; } }
.hover-new-img-layer { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.1, 0.7, 0.1, 1); opacity: 0; }
.hover-gif-btn:hover .hover-new-img-layer { transform: translateX(0); opacity: 0.25; }

/* drift 애니메이션 */
.drift-btn .drift-img-1 { opacity: 0.3; }
.drift-btn .drift-img-2 { opacity: 0; }
.drift-btn:hover .drift-img-1 { animation: driftLeftFade 12s linear infinite; }
.drift-btn:hover .drift-img-2 { animation: driftRightFade 12s linear infinite; }
@keyframes driftLeftFade {
    0%   { opacity: 0.3; transform: scale(1.15) translateX(15px); }
    40%  { opacity: 0.3; transform: scale(1.15) translateX(-15px); }
    50%  { opacity: 0;   transform: scale(1.15) translateX(-20px); }
    90%  { opacity: 0;   transform: scale(1.15) translateX(20px); }
    100% { opacity: 0.3; transform: scale(1.15) translateX(15px); }
}
@keyframes driftRightFade {
    0%   { opacity: 0;   transform: scale(1.15) translateX(-20px); }
    40%  { opacity: 0;   transform: scale(1.15) translateX(-20px); }
    50%  { opacity: 0.3; transform: scale(1.15) translateX(-15px); }
    90%  { opacity: 0.3; transform: scale(1.15) translateX(15px); }
    100% { opacity: 0;   transform: scale(1.15) translateX(20px); }
}

/* ========== 프로필 시스템 ========== */
body.user-profile-page .liberty-content-header,
body.user-profile-page .mw-page-title-main,
body.user-profile-page .mw-page-title-namespace,
body.user-profile-page .mw-page-title-separator,
body.user-profile-page .content-tools {
display:none !important;
}

body.user-profile-page .catlinks {
display:none !important;
}

.user-profile-portal {
width:100%;
margin:0 auto;
padding:8px;
box-sizing:border-box;
background:#070707;
color:#e2e2e2;
font-size:11px;
line-height:1.5;
}

.user-profile-portal *,
.user-profile-portal *::before,
.user-profile-portal *::after {
box-sizing:border-box;
}

.profile-card {
background:#101010;
border:1px solid;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b;
border-radius:0;
margin:0 0 8px;
padding:0;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.70);
color:#e2e2e2;
}

.profile-card-titlebar {
height:28px;
min-height:28px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
background:#1d1d1d;
border-bottom:1px solid #050505;
color:#e2e2e2;
font-size:11px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.050),
inset 0 -1px 0 rgba(0,0,0,0.70);
}

.profile-card-titlebar span:first-child {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.profile-card-titlebar span:last-child {
flex:0 0 auto;
color:#8a8a8a;
font-size:9px;
letter-spacing:0.4px;
white-space:nowrap;
}

.profile-card-body {
padding:8px;
background:#101010;
}

.profile-identity-row {
display:grid;
grid-template-columns:142px minmax(0,1fr);
gap:8px;
margin:0 0 8px;
}

.profile-avatar-bay,
.profile-info-panel,
.profile-bio-panel,
.profile-stats-panel {
min-width:0;
background:#080808;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.018),
inset 0 -1px 0 rgba(0,0,0,0.60);
}

.profile-avatar-bay {
min-height:142px;
display:flex;
align-items:center;
justify-content:center;
padding:8px;
}

.profile-avatar-bay img,
.profile-avatar img {
display:block;
width:112px;
height:112px;
object-fit:cover;
object-position:center;
border-radius:0;
background:#070707;
border:1px solid;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
0 0 0 1px rgba(0,0,0,0.40);
}

.profile-info-panel {
padding:8px;
position:relative;
}

.profile-nameplate {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
align-items:center;
min-height:28px;
margin:0 0 7px;
padding:0 0 7px;
border-bottom:1px solid #202020;
}

.profile-username {
min-width:0;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
font-family:inherit !important;
font-size:18px !important;
font-weight:700 !important;
line-height:1.15 !important;
color:#ffffff !important;
text-shadow:1px 1px 0 #000;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.profile-edit-btn {
position:relative;
top:auto;
right:auto;
display:inline-grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:6px;
height:24px;
min-width:78px;
padding:0 7px;
box-sizing:border-box;
background:
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);
border:1px solid;
border-color:
#333333
#202020
#181818
#202020;
border-radius:0;
color:#c8c8c8 !important;
font-size:10px;
font-weight:700;
line-height:1;
text-decoration:none !important;
text-align:left;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040);
}

.profile-edit-btn:hover {
background:
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);
border-color:
#444444
#333333
#202020
#333333;
color:#ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.060),
0 0 0 1px rgba(255,255,255,0.018);
}

.profile-edit-btn:active {
background:
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);
border-color:
#050505
#202020
#333333
#202020;
box-shadow:
inset 1px 1px 3px rgba(0,0,0,0.82),
inset -1px -1px 0 rgba(255,255,255,0.035);
}

.profile-edit-label {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.profile-edit-arrow {
color:#8a8a8a;
font-size:13px;
line-height:1;
}

.profile-edit-btn:hover .profile-edit-arrow {
color:#ffffff;
}

.profile-name,
.profile-role,
.profile-discord,
.profile-bio,
.profile-badges {
position:relative;
z-index:1;
}

.profile-name:empty,
.profile-role:empty,
.profile-discord:empty,
.profile-bio:empty,
.profile-badges:empty {
display:none;
}

.profile-name {
margin:0 0 6px;
color:#c8c8c8;
font-size:12px;
font-weight:700;
line-height:1.35;
}

.profile-role {
display:inline-flex;
align-items:center;
height:20px;
margin:0 0 7px;
padding:0 7px;
background:#141414;
border:1px solid #202020;
color:#e2e2e2;
font-size:10px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.030),
inset 0 -1px 0 rgba(0,0,0,0.60);
}

.profile-discord {
margin:0 0 6px;
color:#8a8a8a;
font-size:11px;
font-weight:700;
line-height:1.35;
}

.profile-badges {
display:flex;
flex-wrap:wrap;
gap:4px;
margin:7px 0 0;
}

.clbi-badge {
display:inline-flex;
align-items:center;
height:20px;
padding:0 7px;
background:#141414;
border:1px solid #202020;
color:#c8c8c8;
font-size:10px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.030),
inset 0 -1px 0 rgba(0,0,0,0.60);
}

.profile-lower-grid {
display:grid;
grid-template-columns:minmax(0,1fr) 220px;
gap:8px;
}

.profile-bio-panel,
.profile-stats-panel {
padding:0;
}

.profile-section-title {
height:22px;
min-height:22px;
display:flex;
align-items:center;
padding:0 8px;
background:#1d1d1d;
border-bottom:1px solid #050505;
color:#c8c8c8;
font-size:9px;
font-weight:700;
line-height:1;
letter-spacing:0.55px;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.68);
}

.profile-bio {
min-height:96px;
padding:8px;
color:#c8c8c8;
font-size:12px;
line-height:1.55;
white-space:pre-wrap;
word-break:keep-all;
}

.profile-bio:empty::before {
content:"등록된 소개가 없습니다.";
color:#626262;
}

.profile-stats {
margin:0;
padding:8px;
border:0;
display:grid;
grid-template-columns:1fr;
gap:8px;
}

.profile-stat,
.profile-page-progress-body {
background:#101010;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.60);
}

.profile-stat {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:58px;
}

.profile-page-progress {
background:#080808;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.018),
inset 0 -1px 0 rgba(0,0,0,0.60);
}

.profile-page-progress .profile-section-title {
height:22px;
min-height:22px;
}

.profile-page-progress-body {
padding:7px;
}

.profile-page-progress-row {
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
height:16px;
line-height:1;
}

.profile-page-level {
color:#e2e2e2;
font-size:11px;
font-weight:700;
text-shadow:1px 1px 0 #000;
white-space:nowrap;
}

.profile-page-total-xp {
color:#8a8a8a;
font-size:10px;
font-weight:700;
text-shadow:1px 1px 0 #000;
white-space:nowrap;
}

.profile-page-xp-bar {
position:relative;
height:6px;
margin:7px 0 6px;
background:#070707;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.018),
inset 0 -1px 0 rgba(0,0,0,0.72);
overflow:hidden;
}

.profile-page-xp-fill {
position:absolute;
left:0;
top:0;
bottom:0;
width:0;
background:linear-gradient(to bottom, #9acb7a 0%, #5f9f68 58%, #3f6f47 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
inset 0 -1px 0 rgba(0,0,0,0.42);
}

.profile-page-progress.is-max-level .profile-page-xp-fill {
width:100% !important;
background:linear-gradient(to bottom, #f0d27a 0%, #b58a3a 58%, #7b5b1f 100%);
}

.profile-page-progress-sub,
.profile-page-progress-meta {
color:#8a8a8a;
font-size:9px;
font-weight:700;
line-height:1.25;
text-shadow:1px 1px 0 #000;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.profile-page-progress-meta {
margin-top:3px;
color:#626262;
}

.clbi-stat-value {
font-size:18px;
font-weight:700;
line-height:1.1;
color:#ffffff;
text-shadow:1px 1px 0 #000;
}

.clbi-stat-label {
margin-top:4px;
font-size:10px;
font-weight:700;
line-height:1;
color:#8a8a8a;
text-shadow:1px 1px 0 #000;
}

@media screen and (max-width:900px) {
.profile-identity-row,
.profile-lower-grid {
grid-template-columns:1fr;
}

.profile-avatar-bay {
min-height:126px;
}
}

/* 사용자정보 페이지 */
.clbi-prefs-profile {
max-width:620px;
padding:0;
margin:0;
background:#101010;
border:1px solid;
border-color:
#555555
#2b2b2b
#050505
#2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.035),
inset 0 -1px 0 rgba(0,0,0,0.70),
0 6px 18px rgba(0,0,0,0.34);
}

.clbi-prefs-profile::before {
content:"PROFILE SETTINGS";
display:flex;
align-items:center;
height:28px;
padding:0 10px;
background:#1d1d1d;
border-bottom:1px solid #050505;
color:#e2e2e2;
font-size:11px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.050),
inset 0 -1px 0 rgba(0,0,0,0.70);
}

.clbi-pref-row {
margin:0;
padding:8px;
background:#101010;
border-bottom:1px solid #202020;
}

.clbi-pref-row:last-of-type {
border-bottom:0;
}

.clbi-pref-row label {
display:block;
margin:0 0 6px;
color:#8a8a8a;
font-size:10px;
font-weight:700;
line-height:1;
letter-spacing:0.3px;
text-shadow:1px 1px 0 #000;
}

.clbi-pref-static,
.clbi-pref-row input,
.clbi-pref-row textarea {
width:100%;
box-sizing:border-box;
background:#080808;
border:1px solid #202020;
color:#e2e2e2;
padding:7px 8px;
border-radius:0;
font-size:12px;
line-height:1.45;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.018),
inset 0 -1px 0 rgba(0,0,0,0.60);
}

.clbi-pref-static {
min-height:30px;
}

.clbi-pref-row textarea {
height:92px;
resize:vertical;
}

.clbi-pref-row input:focus,
.clbi-pref-row textarea:focus {
outline:none;
border-color:#555555;
background:#0c0c0c;
}

.clbi-pref-link {
display:inline-flex;
align-items:center;
height:24px;
color:#c8c8c8 !important;
font-size:11px;
font-weight:700;
text-decoration:none !important;
}

.clbi-pref-link:hover {
color:#ffffff !important;
}

#clbi-pref-save {
margin:8px;
height:28px;
padding:0 12px;
background:
linear-gradient(to bottom, #141414 0%, #101010 54%, #0c0c0c 100%);
border:1px solid;
border-color:
#333333
#202020
#181818
#202020;
border-radius:0;
color:#c8c8c8;
cursor:pointer;
font-size:11px;
font-weight:700;
line-height:1;
text-shadow:1px 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040);
}

#clbi-pref-save:hover {
background:
linear-gradient(to bottom, #1d1d1d 0%, #171717 54%, #101010 100%);
border-color:
#444444
#333333
#202020
#333333;
color:#ffffff;
}

#clbi-pref-save:active {
background:
linear-gradient(to bottom, #0b0b0b 0%, #101010 55%, #171717 100%);
border-color:
#050505
#202020
#333333
#202020;
box-shadow:
inset 1px 1px 3px rgba(0,0,0,0.82),
inset -1px -1px 0 rgba(255,255,255,0.035);
}

#clbi-pref-status {
margin-left:4px;
color:#8a8a8a;
font-size:11px;
font-weight:700;
line-height:1.45;
}

#clbi-pref-status.clbi-pref-status-ok,
#clbi-pref-status:not(:empty) {
color:#95c88f;
}