미디어위키:Template.css

/* =========================================
   Document View System — doc-*
   기본 문서 시스템
   ========================================= */

/* ── screen-body ── */
.screen-body {
position: relative;
width: calc(100% + 32px);
margin: 0 -16px 0 -16px;
padding: 4px 8px 4px 8px;
box-sizing: border-box;
background: #101010;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555,
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
border-top: 0;
overflow: visible;
}

/* ── doc-body ── */
.doc-body {
position: relative;
z-index: 3;
box-sizing: border-box;
width: 100%;
padding: 0;
background: transparent;
}

/* =========================================
   doc-header — 상단 식별 레일
   ========================================= */

.doc-header {
position: relative;
display: grid;
grid-template-columns: 24px 1fr auto 24px;
align-items: center;
height: 28px;
margin-bottom: 7px;
padding: 0 8px;
box-sizing: border-box;
background:
linear-gradient(
to bottom,
#282828 0%,
#1a1a1a 40%,
#161616 100%
);
border-top: 1px solid #3a3a3a;
border-bottom: 1px solid #0a0a0a;
border-left: 1px solid #222;
border-right: 1px solid #222;
border-radius: 2px;
}

.doc-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.06;
background: repeating-linear-gradient(
135deg,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 1px,
transparent 1px,
transparent 4px
);
border-radius: inherit;
}

.doc-header-id {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: #c0c0c0;
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
position: relative;
z-index: 1;
}

/* ── 나사 ── */
.doc-screw {
position: relative;
z-index: 1;
width: 10px;
height: 10px;
border-radius: 50%;
background:
radial-gradient(circle at 36% 32%, rgba(255,255,255,0.35) 0%, transparent 28%),
linear-gradient(145deg, #505050 0%, #282828 55%, #0e0e0e 100%);
border: 1px solid #090909;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.15),
inset 0 -1px 0 rgba(0,0,0,0.60),
0 0 0 1px #333;
justify-self: center;
}

.doc-screw::after {
content: "";
position: absolute;
top: 50%;
left: 15%;
right: 15%;
height: 1px;
transform: translateY(-50%);
background: rgba(0,0,0,0.55);
border-radius: 1px;
}

/* ── 상태 램프 묶음 ── */
.doc-status {
display: flex;
align-items: center;
gap: 5px;
position: relative;
z-index: 1;
}

.doc-status-lamp {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #111;
border: 1px solid #060606;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 0 0 1px #252525;
}

.doc-status-lamp.on {
background: radial-gradient(circle at 38% 32%, #d9ff9d 0%, #7ec43e 45%, #253d18 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.28),
0 0 0 1px #1a3010,
0 0 5px rgba(100,200,50,0.45);
}

.doc-status-lamp.warn {
background: radial-gradient(circle at 38% 32%, #ffe8b0 0%, #d89a42 45%, #4d2a0d 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.28),
0 0 0 1px #3a1f06,
0 0 5px rgba(220,140,40,0.45);
}

/* =========================================
   doc-layout — 3단 본문 그리드
   ========================================= */

.doc-layout {
display: grid;
grid-template-columns: 200px minmax(0, 1fr) 320px;
gap: 7px;
align-items: stretch;
min-height: 480px;
}

.doc-layout-left,
.doc-layout-center,
.doc-layout-right {
min-width: 0;
}

.doc-layout-center,
.doc-layout-right {
display: flex;
flex-direction: column;
gap: 7px;
}

.doc-layout-lower {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 7px;
flex: 1;
}

/* =========================================
   doc-panel — 패널 공통
   infobox-glass-split-box의 끝부분 파임 효과만 사용
   ========================================= */

.doc-panel {
position: relative;
box-sizing: border-box;
width: 100%;
min-width: 0;
background: #101010;
border: 0;
border-radius: 2px;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555,
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
overflow: hidden;
}

/* ── doc-panel-title: 패널 헤더 바 ── */
.doc-panel-title {
position: relative;
box-sizing: border-box;
padding: 6px 10px 5px 10px;
font-family: 'Galmuri11', sans-serif !important;
font-size: 10px;
font-weight: 700;
text-align: center;
line-height: 1.2;
letter-spacing: 0.10em;
color: #d8d8d8;
background: #101010;
border-bottom: 1px solid rgba(255,255,255,0.035);
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555,
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
text-transform: uppercase;
}

/* =========================================
   doc-display — 본문 텍스트
   ========================================= */

.doc-display {
position: relative;
box-sizing: border-box;
padding: 4px 14px;
margin-bottom: 0;
min-height: 90px;
line-height: 1.8;
color: #d8d8d8;
background: #111111;
border-top: 1px solid #0a0a0a;
box-shadow:
inset 0 2px 6px rgba(0,0,0,0.55),
inset 0 0 1px rgba(0,0,0,0.80);
}

/* =========================================
   doc-info — 키/값 정보
   ========================================= */

.doc-info-row {
position: relative;
display: grid;
grid-template-columns: 68px minmax(0, 1fr);
gap: 8px;
align-items: center;
margin: 7px 10px 0 10px;
}

.doc-info-key {
font-size: 10px;
font-weight: 700;
color: #7a7a7a;
letter-spacing: 0.06em;
text-shadow: 0 1px 0 rgba(0,0,0,0.70);
}

.doc-info-value {
position: relative;
overflow: hidden;
text-align: right;
border-radius: 2px;
background: #0e0e0e;
color: #d8d8d8;
padding: 4px 9px;
font-size: 11px;
font-weight: 700;
box-sizing: border-box;
border-top: 1px solid #0a0a0a;
border-bottom: 1px solid #252525;
border-left: 1px solid #111;
border-right: 1px solid #111;
box-shadow:
inset 0 2px 4px rgba(0,0,0,0.60),
inset 1px 0 0 rgba(255,255,255,0.015);
}

.doc-info-value::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.15;
background: repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.055) 0px,
rgba(255,255,255,0.055) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: screen;
}

/* =========================================
   doc-nav — 섹션 탐색
   ========================================= */

.doc-nav {
height: 100%;
display: flex;
flex-direction: column;
}

.doc-nav-item {
position: relative;
box-sizing: border-box;
width: calc(100% - 16px);
margin: 5px 8px 0 8px;
padding: 7px 24px 7px 10px;
font-size: 11px;
font-weight: 700;
line-height: 1.35;
color: #666;
background: linear-gradient(to bottom, #232323 0%, #1a1a1a 50%, #161616 100%);
border-top: 1px solid #2e2e2e;
border-bottom: 1px solid #0a0a0a;
border-left: 1px solid #222;
border-right: 1px solid #111;
border-radius: 2px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
0 1px 0 rgba(255,255,255,0.012);
cursor: pointer;
display: block;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.70);
}

.doc-nav-item::after {
content: "›";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #333;
font-size: 13px;
}

.doc-nav-item.active {
color: #e8e8e8;
background: linear-gradient(to bottom, #5a2040 0%, #3d1a2f 52%, #2e1222 100%);
border-top-color: #7a3055;
border-bottom-color: #1a0810;
border-left-color: #6a2848;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 0 6px rgba(212,90,162,0.10);
}

.doc-nav-item.active::after {
color: #d45aa2;
}

/* ── doc-status-row ── */
.doc-status-row {
position: relative;
display: flex;
align-items: center;
gap: 7px;
margin: 5px 8px 0 8px;
padding: 5px 9px;
box-sizing: border-box;
font-size: 10px;
font-weight: 700;
color: #555;
background: #111;
border-top: 1px solid #0a0a0a;
border-bottom: 1px solid #222;
border-left: 1px solid #111;
border-right: 1px solid #111;
border-radius: 2px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.50);
letter-spacing: 0.06em;
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
}

/* =========================================
   doc-link — 문서 링크 요소
   ========================================= */

.doc-link {
position: relative;
box-sizing: border-box;
margin: 5px 10px 0 10px;
padding: 6px 10px 6px 14px;
font-size: 11px;
font-weight: 700;
color: #888;
background: linear-gradient(to bottom, #1a1a1a 0%, #151515 100%);
border-top: 1px solid #242424;
border-bottom: 1px solid #080808;
border-left: 1px solid #1e1e1e;
border-right: 1px solid #111;
border-radius: 2px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.018);
display: block;
text-decoration: none;
cursor: pointer;
text-shadow: 0 1px 0 rgba(0,0,0,0.70);
}

.doc-link::before {
content: "";
position: absolute;
left: 5px;
top: 20%;
bottom: 20%;
width: 2px;
background: #2e2e2e;
border-radius: 1px;
}

.doc-link:hover {
color: #c0c0c0;
background: linear-gradient(to bottom, #222 0%, #1a1a1a 100%);
border-top-color: #333;
}

.doc-link:hover::before {
background: #854369;
}

/* =========================================
   doc-footer — 하단 레일
   infobox-glass-split-box의 끝부분 파임 효과만 사용
   ========================================= */

.doc-footer {
display: grid;
grid-template-columns: 1fr 110px 44px 110px 200px;
gap: 12px;
align-items: center;
height: 44px;
margin-top: 7px;
padding: 0 10px;
box-sizing: border-box;
background: #101010;
box-shadow:
inset 1px 0 0 #494949,
inset 0 -1px 0 #555,
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
border: 0;
border-radius: 2px;
}

.doc-footer-sliders {
display: flex;
align-items: center;
gap: 10px;
}

.doc-slider {
position: relative;
width: 80px;
height: 6px;
background: #0a0a0a;
border-top: 1px solid #080808;
border-bottom: 1px solid #222;
border-radius: 999px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.70);
}

.doc-slider.short {
width: 54px;
}

.doc-slider::after {
content: "";
position: absolute;
top: -6px;
left: 48%;
width: 10px;
height: 18px;
border-radius: 2px;
background: linear-gradient(to bottom, #c8c0b2 0%, #8a8278 100%);
border-top: 1px solid #d8d0c2;
border-bottom: 1px solid #2a2622;
border-left: 1px solid #aaa49c;
border-right: 1px solid #5a544e;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.30),
0 1px 3px rgba(0,0,0,0.40);
}

/* doc-date: 날짜 readout */
.doc-date {
box-sizing: border-box;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: #d45aa2;
background: #0a0a0a;
border-top: 1px solid #080808;
border-bottom: 1px solid #2a1a22;
border-left: 1px solid #0e0e0e;
border-right: 1px solid #0e0e0e;
border-radius: 2px;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.70);
text-shadow: 0 0 8px rgba(212,90,162,0.40);
}

/* doc-knob */
.doc-knob {
justify-self: center;
width: 32px;
height: 32px;
border-radius: 50%;
background:
radial-gradient(circle at 36% 28%, rgba(255,255,255,0.30) 0%, transparent 24%),
linear-gradient(145deg, #c8bfb0 0%, #8a8278 48%, #464039 100%);
border: 1px solid #2a2520;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.30),
inset 0 -2px 0 rgba(0,0,0,0.22),
0 2px 5px rgba(0,0,0,0.50);
}

/* doc-keys */
.doc-keys {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
}

.doc-keys span {
height: 22px;
border-radius: 2px;
background: linear-gradient(to bottom, #d8d4ca 0%, #a09890 55%, #6e6660 100%);
border-top: 1px solid #e0dcd2;
border-bottom: 1px solid #1e1c18;
border-left: 1px solid #b8b0a8;
border-right: 1px solid #4a4440;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.40),
0 1px 2px rgba(0,0,0,0.30);
}

.doc-keys span.red {
background: linear-gradient(to bottom, #cc6058 0%, #922e28 55%, #521410 100%);
border-top-color: #d87070;
border-bottom-color: #1e0808;
}

.doc-keys span.amber {
background: linear-gradient(to bottom, #e4bc6c 0%, #b87c28 55%, #6c3e08 100%);
border-top-color: #ecd080;
border-bottom-color: #201008;
}

/* ── doc-tab-bar v2: 균등 분할 + Q/E 가이드 ── */
.doc-tab-bar {
position: relative;
display: flex;
align-items: stretch;
gap: 3px;
padding: 5px 6px;
background: linear-gradient(to bottom, #141414 0%, #111 100%);
border-top: 1px solid #0a0a0a;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.60);
}

.doc-tab-key {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
gap: 3px;
padding: 0 4px;
user-select: none;
white-space: nowrap;
}

.doc-tab-key kbd {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 10px;
font-weight: 700;
font-family: inherit;
color: #e2e2e2;
background: linear-gradient(to bottom, #2a2a2a 0%, #1e1e1e 100%);
border-top: 1px solid #3a3a3a;
border-bottom: 1px solid #080808;
border-left: 1px solid #2e2e2e;
border-right: 1px solid #111;
border-radius: 2px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 1px 0 rgba(255,255,255,0.02);
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
}

.doc-tab-key .doc-tab-arrow {
font-size: 10px;
color: #333;
line-height: 1;
}

.doc-tab {
flex: 1;
box-sizing: border-box;
padding: 6px 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
color: #e2e2e2;
background: linear-gradient(to bottom, #1e1e1e 0%, #181818 100%);
border-top: 1px solid #2a2a2a;
border-bottom: 1px solid #080808;
border-left: 1px solid #222;
border-right: 1px solid #111;
border-radius: 2px;
cursor: pointer;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
text-transform: uppercase;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.doc-tab:hover {
color: #ffffff;
background: linear-gradient(to bottom, #242424 0%, #1a1a1a 100%);
border-top-color: #333;
}

.doc-tab.active {
color: #ffffff;
background: linear-gradient(to bottom, #2e1222 0%, #3d1a2f 52%, #5a2040 100%);
border-top-color: #7a3055;
border-bottom-color: #1a0810;
border-left-color: #6a2848;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── doc-panel 내부 wikitable 리셋 ── */
.doc-panel table {
width: 100%;
border-collapse: collapse;
margin: 0;
}

/* ── doc-panel 테이블 리셋 v2 ── */
.doc-panel table th,
.doc-panel table td {
background: transparent !important;
border: none !important;
padding: 0 !important;
vertical-align: middle !important;
}

/* 인라인 style 배경 복원 허용 */
.doc-panel table th[style],
.doc-panel table td[style] {
background: revert !important;
border: revert !important;
padding: revert !important;
}

/* ── doc-info-block: 카테고리 + 값 묶음 ── */
.doc-info-block {
padding: 0 8px 6px 8px;
background: #1a1a1a;
}

.doc-info-block-label {
display: block;
padding: 6px 2px 4px 2px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #9a9a9a;
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
}

/* ── 반응형 ── */
@media screen and (max-width: 1280px) {
.doc-layout {
grid-template-columns: 210px minmax(0, 1fr);
}

.doc-layout-right {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 7px;
}

.doc-footer {
grid-template-columns: 1fr 110px 44px 110px;
}

.doc-keys {
display: none;
}
}

@media screen and (max-width: 980px) {
.doc-layout,
.doc-layout-lower,
.doc-layout-right {
grid-template-columns: 1fr;
}

.doc-footer {
grid-template-columns: 1fr;
height: auto;
padding: 8px 10px;
}

.doc-footer-sliders {
justify-content: center;
}

.doc-date,
.doc-knob {
justify-self: center;
}
}