/* ─────────────────────────────────────────────────────────────────────────────
관리자 전용 테마 3가지 (11-05 사장님) — 마스터·관리자 계정만 고를 수 있다(index.html ERP_THEMES admin:true, 관리자테마점검).
x-win98 윈도우 98 · x-tron 트론 새로운 시작(움직임 많음) · x-dos MS-DOS (귀여운 테마는 11-05 뺌).
색은 다른 테마처럼 토큰(--bg --surface … --accent)으로 주고, 꾸밈만 덧붙인다. 글자 대비는 11-05 계산(본문 4.5 이상).
───────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Nanum+Gothic+Coding:wght@400;700&display=swap');
/* ═════════════ ① 윈도우 98 ═════════════ */
:root[data-theme="x-win98"] {
--bg: #008080; --surface: #c0c0c0; --surface-2: #c0c0c0; --surface-3: #b4b4b4;
--border: #808080; --border-strong: #404040;
--text: #000000; --text-muted: #3a3a3a; --accent: #000080; --accent-ink: #ffffff; --accent-text: #000080;
--ok-bg: #c0c0c0; --ok-fg: #006400; --warn-bg: #c0c0c0; --warn-fg: #6b4a00; --bad-bg: #c0c0c0; --bad-fg: #a00000;
--radius: 0px; --r-xs: 0px; --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-full: 0px;
--sh-1: none; --sh-2: none; --sh-3: none;
--w98-out: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; /* 튀어나온 */
--w98-in: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #000; /* 들어간 */
--field-border: #808080;
--focus: 0 0 0 1px #000;
}
:root[data-theme="x-win98"] body { background: #008080 !important; font-family: '굴림', Gulim, 'MS Sans Serif', Tahoma, sans-serif !important; }
:root[data-theme="x-win98"] * { border-radius: 0 !important; transition: none !important; letter-spacing: 0 !important; }
:root[data-theme="x-win98"] #top-header { background: linear-gradient(90deg, #000080, #0a64b4) !important; color: #fff !important; border-bottom: 0 !important; }
:root[data-theme="x-win98"] #top-header :is(b, span, h1, .c-logo, .c-crumb, .c-crumb b, i) { color: #fff !important; }
:root[data-theme="x-win98"] #top-header button { background: #c0c0c0 !important; box-shadow: var(--w98-out) !important; color: #000 !important; width: 28px !important; height: 24px !important; }
:root[data-theme="x-win98"] #top-header button svg { width: 14px !important; height: 14px !important; color: #000 !important; }
:root[data-theme="x-win98"] #top-header input { background: #fff !important; box-shadow: var(--w98-in) !important; border: 0 !important; color: #000 !important; }
:root[data-theme="x-win98"] :is(.glass-card, .glass-panel, .c-tree, .c-insp, .c-rib, .c-status, [id^="modal-"] > .glass-panel) { background: #c0c0c0 !important; box-shadow: var(--w98-out) !important; border: 0 !important; }
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel { padding: 3px !important; }
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel > :first-child { background: linear-gradient(90deg, #000080, #0a64b4); color: #fff; padding: 4px 6px !important; margin: 0 0 10px !important; }
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel > :first-child :is(h3, button, svg) { color: #fff !important; font-size: 13px !important; }
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel > :not(:first-child) { margin-left: 10px; margin-right: 10px; }
:root[data-theme="x-win98"] button:not(#top-header button):not(.c-tree button):not(.c-tab) { background: #c0c0c0 !important; color: #000 !important; box-shadow: var(--w98-out) !important; border: 0 !important; filter: none !important; }
:root[data-theme="x-win98"] button:not(:disabled):active { box-shadow: var(--w98-in) !important; }
:root[data-theme="x-win98"] button:disabled { color: #808080 !important; text-shadow: 1px 1px #fff; opacity: 1 !important; }
:root[data-theme="x-win98"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { background: #fff !important; box-shadow: var(--w98-in) !important; border: 0 !important; color: #000 !important; }
:root[data-theme="x-win98"] .on-accent, :root[data-theme="x-win98"] .c-tree button.active, :root[data-theme="x-win98"] .nav-item.active { background: #000080 !important; color: #fff !important; }
:root[data-theme="x-win98"] .c-tab { background: #c0c0c0 !important; box-shadow: inset 1px 1px #fff, inset -1px 0 #808080 !important; border: 0 !important; }
:root[data-theme="x-win98"] .c-tab.on { box-shadow: inset 1px 1px #fff, inset -1px 0 #000, inset -2px 0 #808080 !important; }
:root[data-theme="x-win98"] .table-container thead th { background: #c0c0c0 !important; box-shadow: var(--w98-out) !important; color: #000 !important; }
:root[data-theme="x-win98"] .table-container tbody tr:hover { background: #000080 !important; }
:root[data-theme="x-win98"] .table-container tbody tr:hover td, :root[data-theme="x-win98"] .table-container tbody tr:hover td * { color: #fff !important; }
:root[data-theme="x-win98"] ::-webkit-scrollbar { width: 16px; height: 16px; }
:root[data-theme="x-win98"] ::-webkit-scrollbar-track { background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 2px 2px; }
:root[data-theme="x-win98"] ::-webkit-scrollbar-thumb { background: #c0c0c0; border: 0; box-shadow: var(--w98-out); border-radius: 0; }
:root[data-theme="x-win98"] * { scrollbar-color: auto; scrollbar-width: auto; }
:root[data-theme="x-win98"] #toast { background: #ffffe1 !important; color: #000 !important; border: 1px solid #000 !important; box-shadow: none !important; }
/* ── 윈도우 98 효과 더하기 (11-05 사장님) ── */
:root[data-theme="x-win98"] body { -webkit-font-smoothing: none; font-smooth: never; }
/* 창 열기 — 가운데에서 테두리 상자가 커지며 나타난다 */
:root[data-theme="x-win98"] [id^="modal-"]:not(.hidden) > .glass-panel { animation: w98-open .22s steps(5, end) 1 !important; }
@keyframes w98-open { from { clip-path: inset(45% 45% 45% 45%); outline: 1px dotted #000; } to { clip-path: inset(0 0 0 0); outline: 1px dotted transparent; } }
/* 창 제목줄 오른쪽 [_][□][×] — 단추 셋을 따로(11-05 사장님: 한 덩어리로 붙어 보였다), 사이 2px */
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel > :first-child { display: flex; align-items: center; }
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel > :first-child::before,
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel > :first-child::after {
content: '_'; order: 2; flex: none; width: 20px; height: 18px; margin-right: 2px; text-align: center;
font: 700 11px/14px Tahoma, sans-serif; color: #000; background: #c0c0c0; box-shadow: var(--w98-out);
}
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel > :first-child::before { margin-left: auto; }
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel > :first-child::after { content: '□'; line-height: 17px; }
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel > :first-child > button[onclick*="closeAll"],
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel > :first-child > button[onclick*="closeMessage"] {
order: 3; margin-left: 0 !important; min-width: 20px !important; min-height: 18px !important; width: 20px; height: 18px; padding: 0 !important;
background: #c0c0c0 !important; box-shadow: var(--w98-out) !important;
}
:root[data-theme="x-win98"] [id^="modal-"] > .glass-panel > :first-child > button svg { color: #000 !important; width: 12px !important; height: 12px !important; }
/* 아래 상태줄 = 작업 표시줄 + [시작] 단추 + 시계 칸 */
:root[data-theme="x-win98"] .c-status { height: 30px !important; padding: 2px 4px !important; gap: 6px !important; box-shadow: inset 0 1px #fff, inset 0 2px #dfdfdf !important; }
:root[data-theme="x-win98"] .c-status::before {
content: '시작'; display: flex; align-items: center; height: 22px; padding: 0 8px 0 26px; font: 700 12px/1 Tahoma, '굴림', sans-serif; color: #000;
background: #c0c0c0 no-repeat 6px 50% / 14px 12px; box-shadow: var(--w98-out);
background-image: linear-gradient(90deg, #f03 0 46%, transparent 46% 54%, #0b0 54%), linear-gradient(90deg, #06f 0 46%, transparent 46% 54%, #fc0 54%);
background-size: 14px 5px, 14px 5px; background-position: 6px 7px, 6px 13px;
}
:root[data-theme="x-win98"] .c-status > span:has(#c-st-sync) { padding: 2px 8px; box-shadow: var(--w98-in); background: #c0c0c0; }
/* 불러오는 중 = 모래시계 포인터 */
:root[data-theme="x-win98"] body:has(.spin-ring) { cursor: wait !important; }
:root[data-theme="x-win98"] body:has(.spin-ring) * { cursor: wait !important; }
/* 메뉴 — 올린 항목을 남색으로 */
:root[data-theme="x-win98"] :is(.c-tree button, .nav-item):hover { background: #000080 !important; color: #fff !important; }
:root[data-theme="x-win98"] :is(.c-tree button, .nav-item):hover * { color: #fff !important; }
/* 키보드 초점 = 점선 사각형 */
:root[data-theme="x-win98"] :focus-visible { outline: 1px dotted #000 !important; outline-offset: -4px !important; box-shadow: var(--w98-out) !important; }
/* 스크롤바 위·아래 화살표 단추 */
:root[data-theme="x-win98"] ::-webkit-scrollbar-button:single-button { display: block; width: 16px; height: 16px; background: #c0c0c0 no-repeat center / 8px 8px; box-shadow: var(--w98-out); }
:root[data-theme="x-win98"] ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml;utf8,"); }
:root[data-theme="x-win98"] ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml;utf8,"); }
:root[data-theme="x-win98"] ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml;utf8,"); }
:root[data-theme="x-win98"] ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml;utf8,"); }
:root[data-theme="x-win98"] ::-webkit-scrollbar-button:single-button:active { box-shadow: var(--w98-in); }
/* 알림 띠 = 노란 말풍선 */
:root[data-theme="x-win98"] #toast::after { content: ''; position: absolute; left: 24px; top: -8px; border: 4px solid transparent; border-bottom: 4px solid #000; }
/* 열린 탭 = 속성 창 탭처럼 위로 솟음 */
:root[data-theme="x-win98"] .c-tab.on { transform: translateY(-2px); }
/* ═════════════ ② 트론 새로운 시작 ═════════════ */
:root[data-theme="x-tron"] {
--bg: #02060a; --surface: rgba(6, 18, 26, .86); --surface-2: rgba(10, 28, 38, .9); --surface-3: rgba(16, 42, 56, .9);
--border: rgba(111, 227, 255, .28); --border-strong: rgba(111, 227, 255, .55);
--text: #dff8ff; --text-muted: #8fc4d4; --accent: #00b8e6; --accent-ink: #001218; --accent-text: #6fe3ff;
--ok-bg: rgba(0, 255, 170, .12); --ok-fg: #5effc3; --warn-bg: rgba(255, 170, 0, .12); --warn-fg: #ffc35e; --bad-bg: rgba(255, 60, 60, .14); --bad-fg: #ff7b7b;
--radius: 2px; --r-xs: 2px; --r-sm: 2px; --r-md: 3px; --r-lg: 4px;
--glow: 0 0 6px rgba(111, 227, 255, .55), 0 0 18px rgba(0, 184, 230, .25);
--sh-1: var(--glow); --sh-2: var(--glow); --sh-3: 0 0 0 1px rgba(111, 227, 255, .6), 0 0 30px rgba(0, 184, 230, .35);
--field-border: rgba(111, 227, 255, .6);
}
:root[data-theme="x-tron"] body {
background: radial-gradient(ellipse at 50% 120%, rgba(0, 184, 230, .25), transparent 60%), #02060a !important;
}
/* 움직이는 격자 바닥 + 위에서 아래로 훑는 빛줄기 — 화면 뒤에 깐다 */
:root[data-theme="x-tron"] body::after {
content: ''; position: fixed; left: -50%; right: -50%; bottom: -10%; height: 60%; z-index: -1; pointer-events: none;
background-image: linear-gradient(rgba(111, 227, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(111, 227, 255, .35) 1px, transparent 1px);
background-size: 60px 60px; transform: perspective(500px) rotateX(62deg); transform-origin: bottom;
mask-image: linear-gradient(to top, #000 10%, transparent 90%); animation: tron-floor 4s linear infinite; will-change: transform;
}
:root[data-theme="x-tron"] body::before {
content: ''; position: fixed; left: 0; right: 0; top: 0; height: 220px; z-index: 9998; pointer-events: none;
background: linear-gradient(to bottom, transparent, rgba(111, 227, 255, .07) 50%, transparent);
animation: tron-scan 6s linear infinite; will-change: transform;
}
/* 11-06 가볍게(사장님 '반응속도가 느려'): 바닥·빛줄기를 background-position(매 장면 화면 전체 다시 그리기) 대신 transform(그래픽카드가 옮기기만)으로.
바닥은 격자 한 칸(60px)만큼 밀었다 되돌아오니 이어져 보인다. 창 뒤 흐림(backdrop-filter)도 뺐다 — 트론 바탕은 86~90% 불투명이라
흐림이 거의 안 보이는데, 빛줄기가 지날 때마다 흐림을 다시 계산해 가장 무거웠다 */
@keyframes tron-floor { from { transform: perspective(500px) rotateX(62deg) translateY(0); } to { transform: perspective(500px) rotateX(62deg) translateY(60px); } }
@keyframes tron-scan { from { transform: translateY(-220px); } to { transform: translateY(110vh); } }
:root[data-theme="x-tron"] :is(.glass-card, [id^="modal-"] > .glass-panel) { border: 1px solid var(--border-strong) !important; box-shadow: var(--glow) !important; position: relative; }
/* 위 막대 아래를 달리는 빛 선(라이트 사이클) */
:root[data-theme="x-tron"] #top-header { background: #020a10 !important; border-bottom: 1px solid var(--border-strong) !important; } /* position 은 건드리지 않는다 — 위 막대가 sticky 가 아니면 아이패드가 흐림 처리한다(11-05, 트론만 흐렸던 원인). 바탕도 불투명 */
:root[data-theme="x-tron"] #top-header::after {
content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 22%;
background: linear-gradient(90deg, transparent, #6fe3ff, #fff); box-shadow: 0 0 12px #6fe3ff, 0 0 24px #00b8e6;
animation: tron-cycle 3.2s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes tron-cycle { from { transform: translateX(-100%); } to { transform: translateX(560%); } }
:root[data-theme="x-tron"] :is(h1, h2, h3, h4, .c-logo, .c-kpis b, .font-mono) { font-family: 'Orbitron', 'Noto Sans KR', sans-serif; letter-spacing: .06em; }
:root[data-theme="x-tron"] :is(h3, h4, .c-logo) { color: #bff3ff !important; text-shadow: 0 0 8px rgba(111, 227, 255, .7); }
:root[data-theme="x-tron"] button:not(:disabled):hover { box-shadow: 0 0 0 1px #6fe3ff, 0 0 14px rgba(111, 227, 255, .7) !important; }
:root[data-theme="x-tron"] .on-accent { box-shadow: 0 0 12px rgba(0, 184, 230, .7) !important; }
:root[data-theme="x-tron"] :is(input, select, textarea):focus { box-shadow: 0 0 0 1px #6fe3ff, 0 0 16px rgba(111, 227, 255, .6) !important; }
:root[data-theme="x-tron"] .table-container tbody tr:hover { background: rgba(111, 227, 255, .08) !important; box-shadow: inset 2px 0 0 #6fe3ff; }
/* 화면이 바뀔 때 깜빡이며 켜지는 효과 */
:root[data-theme="x-tron"] [id^="view-"]:not(.hidden) { animation: tron-boot .55s steps(1, end) 1, tron-rise .5s cubic-bezier(.2, 0, 0, 1) 1; }
@keyframes tron-boot { 0% { opacity: 0; } 15% { opacity: .8; } 25% { opacity: .2; } 40% { opacity: 1; } 55% { opacity: .5; } 70%, 100% { opacity: 1; } }
@keyframes tron-rise { from { transform: translateY(6px); filter: blur(2px); } to { transform: none; filter: none; } }
:root[data-theme="x-tron"] [id^="modal-"]:not(.hidden) > .glass-panel { animation: tron-open .35s cubic-bezier(.2, 0, 0, 1) 1; }
@keyframes tron-open { from { clip-path: inset(50% 0 50% 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
:root[data-theme="x-tron"] #toast { border: 1px solid #6fe3ff !important; box-shadow: var(--glow) !important; }
:root[data-theme="x-tron"] ::selection { background: #00b8e6; color: #001218; }
/* ── 트론: 화면 틀 가장자리를 달리는 빛 선 여러 줄기 (11-05 사장님: 위 막대 빛 선처럼) — 줄마다 속도·방향이 다르다 ── */
:root[data-theme="x-tron"] :is(.c-rib, .c-tabs) { position: relative; }
@media (min-width: 768px) { :root[data-theme="x-tron"] .c-insp { position: relative; } } /* 휴대폰 .c-insp 는 position: fixed 아래 시트 — 덮으면 본문 폭이 0 이 된다(11-05 아이폰 빈 화면) */
:root[data-theme="x-tron"] :is(.c-rib, .c-tabs)::after {
content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 18%; pointer-events: none; z-index: 3;
background: linear-gradient(90deg, transparent, #6fe3ff, #fff); box-shadow: 0 0 10px #6fe3ff, 0 0 20px #00b8e6;
}
:root[data-theme="x-tron"] .c-rib::after { animation: tron-cycle-back 4.6s cubic-bezier(.6, 0, .4, 1) infinite; background: linear-gradient(270deg, transparent, #6fe3ff, #fff); }
:root[data-theme="x-tron"] .c-tabs::after { animation: tron-cycle 5.8s cubic-bezier(.5, 0, .5, 1) .8s infinite; width: 12%; }
@keyframes tron-cycle-back { from { transform: translateX(560%); } to { transform: translateX(-100%); } }
:root[data-theme="x-tron"] :is(.c-tree, .c-insp)::before {
content: ''; position: absolute; top: 0; width: 2px; height: 16%; pointer-events: none; z-index: 3;
background: linear-gradient(180deg, transparent, #6fe3ff, #fff); box-shadow: 0 0 10px #6fe3ff, 0 0 20px #00b8e6;
}
:root[data-theme="x-tron"] .c-tree::before { right: -1px; animation: tron-cycle-down 5.2s cubic-bezier(.6, 0, .4, 1) .4s infinite; }
:root[data-theme="x-tron"] .c-insp::before { left: -1px; animation: tron-cycle-up 6.4s cubic-bezier(.6, 0, .4, 1) 1.2s infinite; background: linear-gradient(0deg, transparent, #6fe3ff, #fff); }
@keyframes tron-cycle-down { from { transform: translateY(-100%); } to { transform: translateY(700%); } }
@keyframes tron-cycle-up { from { transform: translateY(700%); } to { transform: translateY(-100%); } }
/* ── 트론 움직임 더하기 (11-05 사장님) ── */
/* 11-06 사장님 "메모리를 많이 쓰는 거 같아": 계속 움직이던 무거운 효과를 뺐다 — 카드 테두리를 도는 빛(카드마다 계속 다시 그림),
떠오르는 빛 입자, 단추·메뉴 숨쉬기, 입력칸 빛 훑기, 상태줄 흐르는 점선. 바닥·빛줄기·가장자리 빛 선(transform)과 한 번만 움직이는 효과는 남김 */
/* 단추 위를 훑는 빛 */
:root[data-theme="x-tron"] :is(.c-ribbon button, #form-submit-btn, .c-acts button, button.on-accent) { position: relative; overflow: hidden; }
:root[data-theme="x-tron"] :is(.c-ribbon button, #form-submit-btn, .c-acts button, button.on-accent):not(:disabled)::after {
content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(191, 243, 255, .45), transparent); transform: skewX(-20deg); opacity: 0;
}
:root[data-theme="x-tron"] :is(.c-ribbon button, #form-submit-btn, .c-acts button, button.on-accent):not(:disabled):hover::after { animation: tron-sweep .7s ease-out 1; }
@keyframes tron-sweep { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 0; } }
/* 표 줄이 하나씩 켜진다 (그릴 때마다) */
:root[data-theme="x-tron"] .table-container tbody tr { animation: tron-row .45s cubic-bezier(.2, 0, 0, 1) backwards; }
:root[data-theme="x-tron"] .table-container tbody tr:nth-child(1) { animation-delay: .02s; } :root[data-theme="x-tron"] .table-container tbody tr:nth-child(2) { animation-delay: .05s; }
:root[data-theme="x-tron"] .table-container tbody tr:nth-child(3) { animation-delay: .08s; } :root[data-theme="x-tron"] .table-container tbody tr:nth-child(4) { animation-delay: .11s; }
:root[data-theme="x-tron"] .table-container tbody tr:nth-child(5) { animation-delay: .14s; } :root[data-theme="x-tron"] .table-container tbody tr:nth-child(6) { animation-delay: .17s; }
:root[data-theme="x-tron"] .table-container tbody tr:nth-child(7) { animation-delay: .2s; } :root[data-theme="x-tron"] .table-container tbody tr:nth-child(n+8) { animation-delay: .23s; }
@keyframes tron-row { from { opacity: 0; transform: translateX(-10px); box-shadow: inset 3px 0 0 #6fe3ff; } }
/* 고른 줄·현재 메뉴가 숨 쉬듯 빛난다 */
:root[data-theme="x-tron"] :is(.table-container tbody tr.c-cur, .c-tree button.active, .nav-item.active) { box-shadow: inset 3px 0 0 #6fe3ff; background-color: rgba(111, 227, 255, .12); }
/* 화면 이름이 바뀔 때 지직 */
:root[data-theme="x-tron"] .c-crumb b, :root[data-theme="x-tron"] .c-tab.on { animation: tron-glitch .6s steps(2, end) 1; }
@keyframes tron-glitch {
0% { text-shadow: 2px 0 #ff2bd6, -2px 0 #6fe3ff; transform: translateX(1px); } 20% { text-shadow: -2px 0 #ff2bd6, 2px 0 #6fe3ff; transform: translateX(-1px); }
40% { text-shadow: 1px 0 #ff2bd6, -1px 0 #6fe3ff; clip-path: inset(0 0 40% 0); } 60% { clip-path: inset(50% 0 0 0); } 100% { text-shadow: none; transform: none; clip-path: none; }
}
/* 아래 상태줄 — 흐르는 데이터 점선 */
:root[data-theme="x-tron"] .c-status { position: relative; overflow: hidden; }
:root[data-theme="x-tron"] .c-status::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: repeating-linear-gradient(90deg, #6fe3ff 0 6px, transparent 6px 18px); background-size: 200px 1px;
opacity: .8;
}
/* 리본 아이콘 — 마우스를 올리면 깜빡 켜짐 */
:root[data-theme="x-tron"] .c-ribbon button:hover svg { animation: tron-flicker .5s steps(1, end) 1; filter: drop-shadow(0 0 6px #6fe3ff); }
@keyframes tron-flicker { 0% { opacity: .3; } 20% { opacity: 1; } 35% { opacity: .5; } 50%, 100% { opacity: 1; } }
/* 알림 띠 — 위에서 스캔하며 내려온다 */
:root[data-theme="x-tron"] #toast[style*="translateY(0"]::after { /* 알림이 내려와 있을 때만(숨은 동안에도 돌던 것, 11-06) */ content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(111, 227, 255, .25), transparent); background-size: 100% 200%; animation: tron-scan2 1.4s linear infinite; }
@keyframes tron-scan2 { from { background-position: 0 -100%; } to { background-position: 0 200%; } }
/* 움직임 줄이기(윈도우 "애니메이션 표시" 꺼짐)여도 움직인다 — 이 테마를 고른 것 자체가 움직임을 원한 것(11-05 사장님 PC: 꺼져 있어 트론이 멈춰 보였다) */
/* ═════════════ ③ MS-DOS ═════════════ (11-05 귀여운 테마 대신) */
:root[data-theme="x-dos"] {
--bg: #000000; --surface: #000000; --surface-2: #0a0a0a; --surface-3: #1a1a1a;
--border: #808080; --border-strong: #aaaaaa;
--text: #c0c0c0; --text-muted: #9a9a9a; --accent: #c0c0c0; --accent-ink: #000000; --accent-text: #ffffff;
--ok-bg: #000; --ok-fg: #55ff55; --warn-bg: #000; --warn-fg: #ffff55; --bad-bg: #000; --bad-fg: #ff5555;
--radius: 0px; --r-xs: 0px; --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-full: 0px;
--sh-1: none; --sh-2: none; --sh-3: none;
--field-border: #aaaaaa;
--focus: 0 0 0 1px #ffffff;
}
:root[data-theme="x-dos"] body {
font-family: 'Nanum Gothic Coding', 'Courier New', ui-monospace, monospace !important;
background: #000 !important;
}
/* 브라운관 가로줄 — 아주 옅게 */
:root[data-theme="x-dos"] body::before {
content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
}
:root[data-theme="x-dos"] *, :root[data-theme="x-dos"] *::before, :root[data-theme="x-dos"] *::after { border-radius: 0 !important; transition: none !important; box-shadow: none !important; letter-spacing: 0 !important; }
:root[data-theme="x-dos"] :is(.glass-card, [id^="modal-"] > .glass-panel) { border: 3px double #aaaaaa !important; background: #000 !important; }
:root[data-theme="x-dos"] :is(.c-tree, .c-insp, .c-rib, .c-tabs, .c-status, #top-header) { background: #000 !important; border-color: #808080 !important; }
:root[data-theme="x-dos"] :is(h1, h2, h3, h4, .c-logo, b, strong) { color: #ffffff !important; font-weight: 700; }
/* C:\ERP> 화면이름_ */
:root[data-theme="x-dos"] .c-crumb b::before { content: 'C:\\ERP> '; color: #c0c0c0; font-weight: 400; }
:root[data-theme="x-dos"] .c-crumb b::after { content: '_'; margin-left: 2px; animation: dos-blink 1s steps(1, end) infinite; }
@keyframes dos-blink { 50% { opacity: 0; } }
/* 단추 = [ 글자 ] */
:root[data-theme="x-dos"] button:not(:disabled):not(.c-tree button):not(.c-tab):not(.c-tg) { background: #000 !important; color: #c0c0c0 !important; border: 1px solid #808080 !important; }
:root[data-theme="x-dos"] :is(.c-ribbon button, #form-submit-btn, .c-acts button) > span:last-child::before,
:root[data-theme="x-dos"] #form-submit-btn::before { content: '[ '; }
:root[data-theme="x-dos"] :is(.c-ribbon button, #form-submit-btn, .c-acts button) > span:last-child::after,
:root[data-theme="x-dos"] #form-submit-btn::after { content: ' ]'; }
:root[data-theme="x-dos"] button:not(:disabled):hover, :root[data-theme="x-dos"] button:focus-visible { background: #c0c0c0 !important; color: #000 !important; }
:root[data-theme="x-dos"] button:not(:disabled):hover *, :root[data-theme="x-dos"] button:focus-visible * { color: #000 !important; }
:root[data-theme="x-dos"] button:disabled { color: #606060 !important; opacity: 1 !important; }
/* 강조 = 글자·바탕 뒤집기 */
:root[data-theme="x-dos"] .on-accent, :root[data-theme="x-dos"] .c-tree button.active, :root[data-theme="x-dos"] .nav-item.active, :root[data-theme="x-dos"] .c-tab.on { background: #c0c0c0 !important; color: #000 !important; }
:root[data-theme="x-dos"] :is(.on-accent, .c-tree button.active, .nav-item.active, .c-tab.on) * { color: #000 !important; }
:root[data-theme="x-dos"] .c-tab { background: #000 !important; border: 1px solid #808080 !important; border-bottom: 0 !important; color: #c0c0c0 !important; }
:root[data-theme="x-dos"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { background: #000 !important; color: #ffffff !important; border: 1px solid #aaaaaa !important; caret-color: #fff; }
:root[data-theme="x-dos"] :is(input, select, textarea):focus { background: #1a1a1a !important; border-color: #ffffff !important; }
:root[data-theme="x-dos"] .table-container thead th { background: #000 !important; color: #ffffff !important; border-bottom: 1px dashed #808080 !important; }
:root[data-theme="x-dos"] .table-container tbody tr:hover, :root[data-theme="x-dos"] .table-container tbody tr.c-cur { background: #c0c0c0 !important; outline: none !important; }
:root[data-theme="x-dos"] .table-container tbody tr:hover td, :root[data-theme="x-dos"] .table-container tbody tr:hover td *,
:root[data-theme="x-dos"] .table-container tbody tr.c-cur td, :root[data-theme="x-dos"] .table-container tbody tr.c-cur td * { color: #000 !important; }
:root[data-theme="x-dos"] svg { color: currentColor !important; }
:root[data-theme="x-dos"] ::-webkit-scrollbar-thumb { background: #808080; border: 0; }
:root[data-theme="x-dos"] ::-webkit-scrollbar-track { background: #1a1a1a; }
:root[data-theme="x-dos"] ::selection { background: #c0c0c0; color: #000; }
:root[data-theme="x-dos"] #toast { background: #000 !important; color: #fff !important; border: 3px double #aaaaaa !important; }
/* ── MS-DOS 효과 더하기 (11-05 사장님) ── */
/* 브라운관: 가장자리 어둡게 + 글자 형광 빛 + 미세한 떨림 + 천천히 지나가는 갱신 띠 */
:root[data-theme="x-dos"]::after {
content: ''; position: fixed; inset: 0; z-index: 9997; pointer-events: none;
background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%),
linear-gradient(to bottom, transparent 0, rgba(255, 255, 255, .035) 48%, rgba(255, 255, 255, .06) 50%, transparent 52%);
background-size: 100% 100%, 100% 300%; animation: dos-roll 7s linear infinite, dos-flicker 3.5s steps(1, end) infinite;
}
@keyframes dos-roll { from { background-position: 0 0, 0 -100%; } to { background-position: 0 0, 0 200%; } }
@keyframes dos-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .92; } 43% { opacity: 1; } 77% { opacity: .95; } 78% { opacity: 1; } }
:root[data-theme="x-dos"] body { text-shadow: 0 0 2px rgba(192, 192, 192, .55); }
/* 화면 바꿀 때 — 타자 치듯 왼쪽에서 오른쪽으로 */
:root[data-theme="x-dos"] [id^="view-"]:not(.hidden) { animation: dos-type .45s steps(14, end) 1; }
@keyframes dos-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* 창 열기 — 위에서 아래로 한 줄씩 그린다 */
:root[data-theme="x-dos"] [id^="modal-"]:not(.hidden) > .glass-panel { animation: dos-draw .35s steps(10, end) 1 !important; }
@keyframes dos-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* 입력칸 커서 = 네모 블록 */
:root[data-theme="x-dos"] :is(input, textarea) { caret-shape: block; caret-color: #c0c0c0; }
/* 불러오는 중 = | / - \ 가 돈다 */
:root[data-theme="x-dos"] .spin-ring { animation: none !important; width: 1ch; }
:root[data-theme="x-dos"] .spin-ring::before { display: none; }
:root[data-theme="x-dos"] .spin-ring::after { content: '|'; position: static; width: auto; height: auto; margin: 0; background: none; border-radius: 0; color: currentColor; animation: dos-spin .6s steps(1, end) infinite; }
@keyframes dos-spin { 0% { content: '|'; } 25% { content: '/'; } 50% { content: '-'; } 75% { content: '\\'; } }
/* 알림 띠 = C:\> 메시지 */
:root[data-theme="x-dos"] #toast > div:first-child { display: none; }
:root[data-theme="x-dos"] #toast-msg::before { content: 'C:\\> '; color: #9a9a9a; }
:root[data-theme="x-dos"] #toast-msg::after { content: '_'; margin-left: 2px; animation: dos-blink 1s steps(1, end) infinite; }
/* 부팅 화면 (index.html 도스부팅) */
#dos-boot { position: fixed; inset: 0; z-index: 2147483000; background: #000; color: #c0c0c0; font: 15px/1.6 'Nanum Gothic Coding', 'Courier New', monospace;
padding: 28px 34px; white-space: pre; text-shadow: 0 0 2px rgba(192, 192, 192, .6); transition: opacity .25s; }
#dos-boot.끝 { opacity: 0; }
/* 움직임 줄이기(윈도우 "애니메이션 표시" 꺼짐)여도 움직인다 — 이 테마를 고른 것 자체가 움직임을 원한 것(11-05 사장님 PC: 꺼져 있어 트론이 멈춰 보였다) */
/* ── 홈 화면 앱(아이패드·아이폰): 화면 전체를 덮는 효과 막은 위 막대 아래부터 (11-05) ──
iOS 26 은 맨 위에 걸친 가장 위쪽 고정 막이 비치면 위 막대 자리를 흐림 처리한다 — 트론 빛줄기·MS-DOS 가로줄/가장자리 그늘 막이
위 막대를 덮어 막대가 계속 흐렸다. 효과는 본문에 그대로 두고 위 막대 아래에서 시작한다 */
html.webapp[data-theme="x-tron"] body::before, html.webapp[data-theme="x-dos"] body::before,
html.webapp[data-theme="x-tron"]::after, html.webapp[data-theme="x-dos"]::after {
inset: calc(env(safe-area-inset-top) + 48px) 0 0 0 !important;
}