미디어위키:AnecdoteViewer.css

/* =========================================
COASTLINE: BLACK ICE - AnecdoteViewer
Anecdote namespace reader mode
========================================= */

/*
설계 목적
-----------------------------------------
AnecdoteViewer는 일반 위키 문서 화면에서 에넥도트 감상 화면으로 넘어가는
세미스탠얼론 모드를 담당한다.

작동 조건:
- .anecdote-viewer-root가 있는 문서
- 또는 Anecdote: 전용 네임스페이스 문서

전환 원칙:
- 상단 네비는 위로 퇴장한다.
- 좌우 사이드바는 아래로 퇴장한다.
- 중앙 본문 컨테이너는 1000px 감상 프레임으로 줄어든다.
- 하단에는 Anecdote 전용 컨트롤 덱을 표시한다.
*/

/* -----------------------------------------
0. Reader mode shell
----------------------------------------- */

html.anecdote-reader-mode-html {
height:100% !important;
overflow:hidden !important;
}

body.anecdote-reader-mode {
min-width:0 !important;
height:100vh !important;
overflow:hidden !important;
}

body.anecdote-reader-mode #clbi-top-nav-wrap {
height:0 !important;
min-height:0 !important;
margin:0 auto !important;
padding:0 !important;
overflow:visible !important;
pointer-events:none;
}

body.anecdote-reader-mode #clbi-top-nav {
transform:translateY(calc(-100% - 18px));
opacity:0;
pointer-events:none;
transition:
transform .46s cubic-bezier(.18,.78,.22,1),
opacity .28s ease;
}

body.anecdote-reader-mode #clbi-left-sidebar,
body.anecdote-reader-mode #clbi-right-sidebar {
position:fixed !important;
top:0 !important;
z-index:20 !important;
transform:translateY(115vh);
opacity:0;
pointer-events:none !important;
transition:
transform .54s cubic-bezier(.18,.78,.22,1),
opacity .28s ease;
}

body.anecdote-reader-mode #clbi-left-sidebar {
left:calc(50vw - 730px);
}

body.anecdote-reader-mode #clbi-right-sidebar {
right:calc(50vw - 730px);
}

body.anecdote-reader-mode .content-wrapper {
position:fixed !important;
left:50% !important;
top:24px !important;
bottom:62px !important;
z-index:30 !important;
width:1000px !important;
min-width:1000px !important;
max-width:1000px !important;
height:auto !important;
display:block !important;
grid-template-columns:none !important;
gap:0 !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
transform:translateX(-50%) !important;
overflow:visible !important;
transition:
width .46s cubic-bezier(.18,.78,.22,1),
top .46s cubic-bezier(.18,.78,.22,1),
bottom .46s cubic-bezier(.18,.78,.22,1);
}

body.anecdote-reader-mode .container-fluid.liberty-content {
width:100% !important;
height:100% !important;
max-width:none !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
display:block !important;
}

body.anecdote-reader-mode .liberty-content-main,
body.anecdote-reader-mode .Liberty .content-wrapper .liberty-content .liberty-content-main {
width:100% !important;
height:100% !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
background:#070707 !important;
border:1px solid !important;
border-color:#555555 #2b2b2b #050505 #2b2b2b !important;
border-radius:0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.72),
0 12px 34px rgba(0,0,0,0.52) !important;
overflow:hidden !important;
}

body.anecdote-reader-mode .liberty-content-header,
body.anecdote-reader-mode .catlinks,
body.anecdote-reader-mode .printfooter,
body.anecdote-reader-mode .liberty-footer,
body.anecdote-reader-mode footer {
display:none !important;
}

body.anecdote-reader-mode .liberty-content-main .mw-parser-output {
height:100% !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
overflow:hidden !important;
}

body.anecdote-reader-mode .mw-parser-output > p:empty {
display:none !important;
}

body.anecdote-reader-mode #dev-tools-panel {
z-index:99998 !important;
}

/* -----------------------------------------
1. Mount root and loading/error state
----------------------------------------- */

.anecdote-viewer-root,
.anecdote-viewer-root *,
.anecdote-viewer-root *::before,
.anecdote-viewer-root *::after {
box-sizing:border-box;
}

.anecdote-viewer-root {
width:100%;
height:100%;
min-height:0;
margin:0;
padding:0;
color:#e2e2e2;
font-size:12px;
line-height:1.55;
}

.anecdote-viewer {
position:relative;
width:100%;
height:100%;
min-height:0;
padding:8px;
background:#070707;
color:#e2e2e2;
overflow:hidden;
isolation:isolate;
}

.anecdote-viewer::before {
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.025) 0%, transparent 42%),
linear-gradient(to bottom, rgba(255,255,255,0.018) 0%, transparent 22%, rgba(0,0,0,0.22) 100%);
}

.anecdote-viewer::after {
content:"";
position:absolute;
inset:-40px 0;
z-index:1;
pointer-events:none;
opacity:.08;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,.08) 0,
rgba(255,255,255,.08) 1px,
transparent 2px,
transparent 5px
);
mix-blend-mode:screen;
}

.anecdote-viewer > * {
position:relative;
z-index:2;
}

.anecdote-viewer.is-loading .anecdote-stage,
.anecdote-viewer.is-error .anecdote-stage,
.anecdote-viewer.is-config-error .anecdote-stage {
min-height:420px;
}

.anecdote-system-panel {
min-height:420px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
background:#080808;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.018),
inset 0 -1px 0 rgba(0,0,0,.64);
text-align:center;
}

.anecdote-system-title {
font-size:12px;
font-weight:700;
letter-spacing:.45px;
color:#e2e2e2;
text-shadow:1px 1px 0 #000;
}

.anecdote-system-text {
max-width:620px;
color:#8a8a8a;
font-size:11px;
line-height:1.6;
}

.anecdote-system-code {
max-width:760px;
margin:4px 0 0;
padding:8px 10px;
background:#050505;
border:1px solid #202020;
color:#c8c8c8;
font-family:Consolas, Monaco, monospace !important;
font-size:11px;
line-height:1.45;
white-space:pre-wrap;
text-align:left;
}

/* -----------------------------------------
2. Main frame
----------------------------------------- */

.anecdote-frame {
position:relative;
display:grid;
grid-template-rows:auto minmax(0, 1fr);
height:100%;
min-height:0;
background:#101010;
border:1px solid;
border-color:#555555 #2b2b2b #050505 #2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.72);
overflow:hidden;
}

.anecdote-titlebar {
height:32px;
min-height:32px;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
align-items:center;
padding:0 10px;
background:#1d1d1d;
border-bottom:1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.050),
inset 0 -1px 0 rgba(0,0,0,.70);
text-shadow:1px 1px 0 #000;
}

.anecdote-title-main {
min-width:0;
display:flex;
align-items:center;
gap:8px;
overflow:hidden;
}

.anecdote-title-label {
height:18px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 6px;
background:#080808;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#c8c8c8;
font-size:9px;
font-weight:700;
letter-spacing:.65px;
white-space:nowrap;
}

.anecdote-title-text {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#e2e2e2;
font-size:12px;
font-weight:700;
}

.anecdote-title-meta {
display:flex;
align-items:center;
gap:6px;
color:#8a8a8a;
font-size:10px;
font-weight:700;
letter-spacing:.35px;
white-space:nowrap;
}

.anecdote-progress-meter {
width:92px;
height:8px;
padding:1px;
background:#050505;
border:1px solid #202020;
box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}

.anecdote-progress-fill {
display:block;
width:0%;
height:100%;
background:#8a8a8a;
box-shadow:0 0 7px rgba(226,226,226,.12);
transition:width .18s ease;
}

/* -----------------------------------------
3. Stage
----------------------------------------- */

.anecdote-stage {
position:relative;
min-height:0;
background:#060606;
overflow:auto;
}

.anecdote-backdrop {
position:absolute;
inset:0;
z-index:0;
background:#050505;
overflow:hidden;
}

.anecdote-backdrop-image {
position:absolute;
inset:0;
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
opacity:.42;
filter:grayscale(1) contrast(1.08) brightness(.72);
transform:scale(1.02);
}

.anecdote-backdrop::before {
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
radial-gradient(ellipse at 50% 38%, transparent 0%, transparent 46%, rgba(0,0,0,.42) 100%),
linear-gradient(to bottom, rgba(0,0,0,.20) 0%, rgba(0,0,0,.52) 100%);
}

.anecdote-backdrop::after {
content:"";
position:absolute;
inset:-28px 0;
z-index:2;
pointer-events:none;
opacity:.14;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,.055) 0,
rgba(255,255,255,.055) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode:screen;
}

.anecdote-stage-grid {
position:relative;
z-index:2;
min-height:100%;
display:grid;
grid-template-columns:190px minmax(0,1fr);
gap:8px;
padding:8px;
}

.anecdote-portrait-bay {
position:relative;
min-height:100%;
background:#080808;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.018),
inset 0 -1px 0 rgba(0,0,0,.62);
overflow:hidden;
}

.anecdote-portrait-bay::before {
content:"PORTRAIT BAY";
position:absolute;
left:8px;
top:7px;
z-index:2;
color:#626262;
font-size:9px;
font-weight:700;
letter-spacing:.55px;
text-shadow:1px 1px 0 #000;
}

.anecdote-portrait-image {
position:absolute;
left:50%;
bottom:0;
width:170px;
max-height:92%;
object-fit:contain;
object-position:center bottom;
transform:translateX(-50%);
filter:grayscale(.22) contrast(1.04) drop-shadow(0 8px 18px rgba(0,0,0,.65));
opacity:1;
}

.anecdote-portrait-empty {
position:absolute;
left:50%;
top:50%;
width:92px;
height:92px;
transform:translate(-50%, -50%);
display:flex;
align-items:center;
justify-content:center;
background:#101010;
border:1px solid #202020;
color:#333333;
font-size:28px;
font-weight:700;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.018),
inset 0 -1px 0 rgba(0,0,0,.62);
}

.anecdote-display {
position:relative;
min-width:0;
min-height:0;
display:grid;
grid-template-rows:1fr auto;
gap:8px;
}

.anecdote-entry-card {
position:relative;
display:grid;
grid-template-rows:auto minmax(0, 1fr) auto;
min-height:0;
background:rgba(8,8,8,.90);
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.018),
inset 0 -1px 0 rgba(0,0,0,.62),
inset 0 0 22px rgba(0,0,0,.72);
overflow:hidden;
}

.anecdote-entry-card::before {
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:
linear-gradient(105deg, transparent 0%, rgba(255,255,255,.032) 18%, transparent 38%, transparent 100%),
radial-gradient(ellipse at 100% 100%, rgba(255,255,255,.028) 0%, transparent 54%);
}

.anecdote-entry-card > * {
position:relative;
z-index:1;
}

.anecdote-speaker-row {
height:34px;
display:flex;
align-items:center;
gap:7px;
padding:0 9px;
background:#101010;
border-bottom:1px solid #050505;
box-shadow:inset 0 1px 0 rgba(255,255,255,.028);
}

.anecdote-speaker-kicker {
height:18px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 6px;
background:#050505;
border:1px solid #202020;
color:#8a8a8a;
font-size:9px;
font-weight:700;
letter-spacing:.45px;
}

.anecdote-speaker-name {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#e2e2e2;
font-size:12px;
font-weight:700;
text-shadow:1px 1px 0 #000;
}

.anecdote-entry-body {
min-height:0;
padding:18px 20px;
overflow:auto;
color:#e2e2e2;
font-size:14px;
line-height:1.78;
word-break:keep-all;
overflow-wrap:break-word;
}

.anecdote-entry-body p {
margin:0 0 10px;
}

.anecdote-entry-body p:last-child {
margin-bottom:0;
}

.anecdote-entry-card.is-narration .anecdote-entry-body {
display:flex;
align-items:center;
font-size:15px;
line-height:1.86;
color:#e6e6e6;
}

.anecdote-entry-card.is-system .anecdote-entry-body {
font-family:Consolas, Monaco, monospace !important;
font-size:12px;
color:#c8c8c8;
}

.anecdote-entry-card.is-chat .anecdote-entry-body {
font-size:13px;
line-height:1.62;
}

.anecdote-chat-card {
display:grid;
grid-template-columns:42px minmax(0,1fr);
gap:9px;
align-items:start;
}

.anecdote-chat-avatar {
width:42px;
height:42px;
background:#101010;
border:1px solid #202020;
object-fit:cover;
object-position:center center;
}

.anecdote-chat-bubble {
min-width:0;
padding:9px 10px;
background:#101010;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.018),
inset 0 -1px 0 rgba(0,0,0,.55);
}

.anecdote-entry-footer {
height:29px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:0 9px;
background:#101010;
border-top:1px solid #050505;
color:#8a8a8a;
font-size:10px;
font-weight:700;
letter-spacing:.35px;
}

.anecdote-entry-hint {
color:#626262;
}

.anecdote-entry-count {
color:#8a8a8a;
font-family:Consolas, Monaco, monospace !important;
}

/* -----------------------------------------
4. Inline controls and log
----------------------------------------- */

.anecdote-inline-controls {
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:5px;
}

.anecdote-button,
.anecdote-link-button {
position:relative;
display:flex;
align-items:center;
justify-content:center;
min-height:28px;
padding:0 9px;
background:linear-gradient(to bottom,#171717 0%,#141414 56%,#101010 100%);
border:1px solid;
border-color:#333333 #202020 #050505 #202020;
color:#c8c8c8 !important;
font-size:10px;
font-weight:700;
line-height:1;
text-align:center;
text-decoration:none !important;
text-shadow:1px 1px 0 #000;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.040);
user-select:none;
}

.anecdote-button:hover,
.anecdote-link-button:hover {
background:linear-gradient(to bottom,#202020 0%,#1a1a1a 56%,#141414 100%);
border-color:#444444 #333333 #101010 #333333;
color:#ffffff !important;
}

.anecdote-button:active,
.anecdote-link-button:active {
background:linear-gradient(to bottom,#0c0c0c 0%,#101010 55%,#171717 100%);
border-color:#050505 #202020 #333333 #202020;
box-shadow:
inset 1px 1px 3px rgba(0,0,0,.82),
inset -1px -1px 0 rgba(255,255,255,.035);
}

.anecdote-button[disabled],
.anecdote-button.is-disabled,
.anecdote-link-button.is-disabled {
opacity:.42;
cursor:default;
pointer-events:none;
}

.anecdote-button.is-active {
color:#ffffff !important;
border-color:#555555 #333333 #101010 #333333;
background:linear-gradient(to bottom,#252525 0%,#1d1d1d 56%,#141414 100%);
}

.anecdote-log-panel {
position:absolute;
right:8px;
bottom:45px;
z-index:8;
width:calc(100% - 214px);
max-height:310px;
display:none;
background:#080808;
border:1px solid;
border-color:#555555 #2b2b2b #050505 #2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
inset 0 -1px 0 rgba(0,0,0,.70),
0 8px 24px rgba(0,0,0,.58);
overflow:hidden;
}

.anecdote-viewer.is-log-open .anecdote-log-panel {
display:block;
}

.anecdote-log-titlebar {
height:25px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:0 8px;
background:#1d1d1d;
border-bottom:1px solid #050505;
color:#c8c8c8;
font-size:10px;
font-weight:700;
text-shadow:1px 1px 0 #000;
}

.anecdote-log-list {
max-height:284px;
overflow:auto;
padding:7px;
}

.anecdote-log-item {
margin:0 0 5px;
padding:7px 8px;
background:#101010;
border:1px solid #202020;
color:#c8c8c8;
font-size:11px;
line-height:1.5;
}

.anecdote-log-item:last-child {
margin-bottom:0;
}

.anecdote-log-speaker {
display:block;
margin:0 0 3px;
color:#8a8a8a;
font-size:9px;
font-weight:700;
letter-spacing:.35px;
}

/* -----------------------------------------
5. Bottom control deck
----------------------------------------- */

#anecdote-control-deck {
position:fixed !important;
left:50% !important;
bottom:10px !important;
z-index:99990 !important;
width:1000px;
max-width:calc(100vw - 32px);
transform:translateX(-50%) translateY(120%);
opacity:0;
pointer-events:none;
transition:
transform .46s cubic-bezier(.18,.78,.22,1),
opacity .24s ease;
}

#anecdote-control-deck:empty {
display:none !important;
}

body.anecdote-reader-mode #anecdote-control-deck {
transform:translateX(-50%) translateY(0);
opacity:1;
pointer-events:auto;
}

.anecdote-control-frame {
display:grid;
grid-template-columns:120px 1fr 1fr 1fr 1fr 1fr 120px;
gap:4px;
min-height:38px;
padding:4px;
background:#101010;
border:1px solid;
border-color:#555555 #2b2b2b #050505 #2b2b2b;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.040),
inset 0 -1px 0 rgba(0,0,0,.72),
0 8px 24px rgba(0,0,0,.55);
}

.anecdote-control-brand {
display:flex;
align-items:center;
justify-content:center;
background:#1d1d1d;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#e2e2e2;
font-size:10px;
font-weight:700;
letter-spacing:.65px;
text-shadow:1px 1px 0 #000;
white-space:nowrap;
}

#anecdote-control-deck .anecdote-button,
#anecdote-control-deck .anecdote-link-button {
min-height:28px;
}

/* -----------------------------------------
6. Compact fallback
----------------------------------------- */

@media (max-width:1040px) {
body.anecdote-reader-mode .content-wrapper {
width:calc(100vw - 24px) !important;
min-width:0 !important;
max-width:calc(100vw - 24px) !important;
left:50% !important;
top:12px !important;
bottom:74px !important;
}

.anecdote-stage-grid {
grid-template-columns:1fr;
}

.anecdote-portrait-bay {
display:none;
}

.anecdote-log-panel {
left:8px;
right:8px;
width:auto;
}

.anecdote-control-frame {
grid-template-columns:1fr 1fr 1fr;
}

.anecdote-control-brand {
display:none;
}
}


/* -----------------------------------------
7. AnecdoteData v1 legacy conversion support
----------------------------------------- */

.anecdote-entry-card.is-briefing .anecdote-entry-body {
display:block;
font-size:12px;
line-height:1.65;
}

.anecdote-entry-card.is-image .anecdote-entry-body {
display:flex;
align-items:center;
justify-content:center;
}

.anecdote-entry-card.tone-darken .anecdote-entry-body,
.anecdote-entry-body .darken {
color:#c8c8c8;
}

.anecdote-entry-body .prologueinfo {
display:block;
width:100%;
margin:0;
padding:12px 14px;
background:#080808;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.018),
inset 0 -1px 0 rgba(0,0,0,.62);
font-size:12px;
line-height:1.7;
color:#d8d8d8;
}

.anecdote-entry-body .narration-highlight1,
.anecdote-entry-body .narration-highlight2,
.anecdote-entry-body .narration-highlight3,
.anecdote-entry-body .narration-highlight4 {
display:inline;
padding:0 2px;
background:#101010;
color:#ffffff;
border-bottom:1px solid #555555;
font-weight:700;
}

.anecdote-entry-body .center-image,
.anecdote-entry-body img.center-image,
.anecdote-entry-card.is-image img {
display:block;
max-width:100%;
max-height:calc(100vh - 210px);
height:auto;
margin:0 auto;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.018),
0 8px 22px rgba(0,0,0,.58);
filter:grayscale(.18) contrast(1.03);
}

.anecdote-entry-body object {
display:inline-block;
vertical-align:-2px;
}

.anecdote-entry-body .dot-fall-soft {
display:inline-flex;
gap:6px;
letter-spacing:1px;
color:#8a8a8a;
}

.anecdote-entry-body .quick-swap {
display:inline-block;
position:relative;
color:#ffffff;
}

.anecdote-entry-body .quick-swap[data-final]::after {
content:attr(data-final);
display:block;
margin-top:3px;
color:#8a8a8a;
font-size:11px;
line-height:1.3;
}

.anecdote-chat-card.is-right {
grid-template-columns:minmax(0,1fr) 42px;
}

.anecdote-chat-card.is-right .anecdote-chat-avatar {
order:2;
}

.anecdote-chat-card.is-right .anecdote-chat-bubble {
order:1;
}

.anecdote-chat-alt {
margin-top:6px;
padding-top:6px;
border-top:1px solid #202020;
color:#8a8a8a;
font-size:11px;
line-height:1.5;
}

.anecdote-chat-alt p {
margin:0;
}