참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* =========================================
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;
isolation: isolate;
}
.screen-body::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0%,
rgba(255,255,255,0.026) 18%,
transparent 45%,
rgba(0,0,0,0.18) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.045) 18%,
transparent 36%,
transparent 100%
);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
}
.screen-body::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.16;
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-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: #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-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0%,
rgba(255,255,255,0.026) 18%,
transparent 45%,
rgba(0,0,0,0.18) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.045) 18%,
transparent 36%,
transparent 100%
);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
}
.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 — 패널 공통
표면 안쪽으로 들어간 유리 모듈
========================================= */
.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;
isolation: isolate;
}
.doc-panel::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0%,
rgba(255,255,255,0.026) 18%,
transparent 45%,
rgba(0,0,0,0.18) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.045) 18%,
transparent 36%,
transparent 100%
);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
}
.doc-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.16;
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-panel-title: 패널 헤더 바 ── */
.doc-panel-title {
position: relative;
z-index: 3;
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: #cfcfcf;
background: linear-gradient(to bottom, #121212 0%, #0d0d0d 100%);
border-bottom: 1px solid rgba(133,67,105,0.42);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.035),
inset 0 -1px 0 rgba(0,0,0,0.58);
text-shadow: 0 1px 0 rgba(0,0,0,0.80);
text-transform: uppercase;
}
/* =========================================
doc-display — 본문 텍스트
========================================= */
.doc-display {
position: relative;
z-index: 3;
box-sizing: border-box;
padding: 4px 14px;
margin-bottom: 0;
min-height: 90px;
line-height: 1.8;
color: #d8d8d8;
background: #0e0e0e;
border-top: 1px solid #080808;
box-shadow:
inset 0 2px 6px rgba(0,0,0,0.60),
inset 0 0 1px rgba(0,0,0,0.80);
}
/* =========================================
doc-info — 키/값 정보
========================================= */
.doc-info-row {
position: relative;
z-index: 3;
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;
z-index: 3;
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;
z-index: 3;
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;
z-index: 3;
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 — 하단 레일
========================================= */
.doc-footer {
position: relative;
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;
overflow: hidden;
}
.doc-footer::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.070) 0%,
rgba(255,255,255,0.026) 18%,
transparent 45%,
rgba(0,0,0,0.18) 100%
),
linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.045) 18%,
transparent 36%,
transparent 100%
);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.026),
inset 0 0 14px rgba(0,0,0,0.30);
}
.doc-footer > * {
position: relative;
z-index: 2;
}
.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-left: 1px solid #111;
border-right: 1px solid #111;
border-radius: 99px;
box-shadow:
inset 0 1px 4px rgba(0,0,0,0.65),
0 1px 0 rgba(255,255,255,0.018);
}
.doc-slider.short {
width: 52px;
}
.doc-slider::after {
content: "";
position: absolute;
top: -5px;
left: 52%;
width: 9px;
height: 16px;
border-radius: 2px;
background: linear-gradient(to bottom, #c8c0b2 0%, #6e675d 100%);
border: 1px solid #050505;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.40),
inset 0 -1px 0 rgba(0,0,0,0.45);
}
.doc-date {
display: flex;
align-items: center;
justify-content: center;
height: 24px;
box-sizing: border-box;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: #9eff72;
background: linear-gradient(to bottom, #050805 0%, #020402 100%);
border: 1px solid #1d3317;
border-radius: 2px;
box-shadow:
inset 0 0 10px rgba(100,220,80,0.10),
0 0 6px rgba(100,220,80,0.08);
text-shadow:
0 0 5px rgba(120,255,100,0.42),
0 0 10px rgba(120,255,100,0.18);
}
.doc-knob {
justify-self: center;
width: 32px;
height: 32px;
border-radius: 50%;
background:
radial-gradient(circle at 38% 30%, rgba(255,255,255,0.34) 0%, transparent 22%),
linear-gradient(145deg, #d2c8b8 0%, #80786d 48%, #27231f 100%);
border: 1px solid #050505;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.42),
inset 0 -3px 0 rgba(0,0,0,0.58),
0 2px 6px rgba(0,0,0,0.50);
}
.doc-keys {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 7px;
}
.doc-keys span {
height: 22px;
border-radius: 3px;
background: linear-gradient(to bottom, #dfddd7 0%, #9e978d 55%, #625b53 100%);
border-top: 1px solid rgba(255,255,255,0.45);
border-bottom: 1px solid rgba(0,0,0,0.55);
border-left: 1px solid #222;
border-right: 1px solid #111;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.45),
inset 0 -2px 0 rgba(0,0,0,0.36);
}
.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;
}
/* ── 반응형 ── */
@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;
}
}
/* =========================================
doc-tab-bar — 패널 하단 탭
========================================= */
.doc-tab-bar {
position: relative;
z-index: 3;
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;
}