/* ============================================================ ES-WMS 레트로 인터페이스 테마 (retro-theme.css) - 기존 style.css는 그대로 두고, 일 때만 덮어쓰는 스킨 - 화면(메뉴)별 포인트 색상은 retro-theme.js 가 CSS 변수로 주입 --r-accent : 현재 화면 포인트색 (타이틀바/버튼/강조) --r-accent-ink : 포인트색 위 글자색 (검정/흰색 자동) --r-accent-deep : 본문 텍스트용으로 어둡게 보정한 포인트색 --r-bg : 전체 배경색 (커스텀 가능) ============================================================ */ html.retro { --r-ink: #1b1725; --r-paper: #fbf4e2; --r-paper2: #f4ead2; --r-bg: #d8d1c0; --r-accent: #ffb937; --r-accent-ink: #1b1725; --r-accent-deep: #a06400; --r-line-soft: #d9cdb2; /* 기존 변수 재매핑 → style.css 전반이 자동으로 레트로 톤 적용 */ --bg: var(--r-bg); --panel: var(--r-paper); --line: var(--r-ink); --text: var(--r-ink); --sub: #6f6553; --accent: var(--r-accent); --accent-soft: color-mix(in srgb, var(--r-accent) 22%, var(--r-paper)); --danger: #e23d3d; --ok: #2b9348; --warn: #c47f17; --pink: #ffe6ee; --radius: 10px; } html.retro body { background: radial-gradient(color-mix(in srgb, var(--r-ink) 9%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--r-bg); } /* 선택 영역/스크롤바 */ html.retro ::selection { background: var(--r-accent); color: var(--r-accent-ink); } html.retro ::-webkit-scrollbar { width: 13px; height: 13px; } html.retro ::-webkit-scrollbar-track { background: var(--r-paper2); border-left: 2px solid var(--r-ink); } html.retro ::-webkit-scrollbar-thumb { background: var(--r-accent); border: 2px solid var(--r-ink); border-radius: 0; } html.retro ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--r-accent) 80%, #fff); } /* ---------- 사이드바 ---------- */ html.retro #sidebar { background: var(--r-paper); color: var(--r-ink); border-right: 2px solid var(--r-ink); width: 224px; } html.retro #sidebar .logo { background: var(--r-accent); color: var(--r-accent-ink); border-bottom: 2px solid var(--r-ink); padding: 14px 14px 11px; position: relative; font-weight: 900; letter-spacing: 0; } html.retro #sidebar .logo::before { content: ''; position: absolute; top: 9px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--r-paper); border: 2px solid var(--r-ink); box-shadow: -18px 0 0 -2px var(--r-paper), -18px 0 0 0 var(--r-ink); } html.retro #sidebar .logo small { color: var(--r-accent-ink); opacity: .72; } html.retro #sidebar a { color: var(--r-ink); border-left: none; margin: 2px 8px; border-radius: 8px; border: 2px solid transparent; font-weight: 600; padding: 8px 10px; } html.retro #sidebar a:hover { background: var(--r-paper2); border-color: var(--r-ink); } html.retro #sidebar a.on { background: var(--r-accent); color: var(--r-accent-ink); border-color: var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); font-weight: 800; } html.retro #nav > div > div:first-child { color: var(--sub) !important; } html.retro #sidebar .foot { border-top: 2px solid var(--r-ink); color: var(--sub); background: var(--r-paper2); } html.retro #sidebar .foot b { color: var(--r-ink); } html.retro #sidebar .foot button { border: 2px solid var(--r-ink); color: var(--r-ink); background: var(--r-paper); border-radius: 8px; box-shadow: 2px 2px 0 var(--r-ink); font-weight: 700; } html.retro #sidebar .foot button:active { transform: translate(2px,2px); box-shadow: none; } /* ---------- 탑바 = 윈도우 타이틀바 ---------- */ html.retro #topbar { background: var(--r-accent); border-bottom: 2px solid var(--r-ink); padding: 9px 16px; position: sticky; } html.retro #topbar h1 { color: var(--r-accent-ink); font-weight: 900; font-size: 15px; letter-spacing: 0; } html.retro #topbar::after { /* ○ − ✕ 윈도우 버튼 장식 */ content: '– ▢ ✕'; order: 99; flex-shrink: 0; margin-left: 6px; font-size: 11.5px; font-weight: 900; color: var(--r-accent-ink); border: 2px solid var(--r-ink); background: var(--r-paper); color: var(--r-ink); border-radius: 8px; padding: 3px 8px; letter-spacing: 4px; box-shadow: 2px 2px 0 var(--r-ink); line-height: 1.2; } html.retro #topbar .btn.sm { background: var(--r-paper); } html.retro #gsearch input { border: 2px solid var(--r-ink); border-radius: 9px; background-color: var(--r-paper); box-shadow: 2px 2px 0 var(--r-ink); font-weight: 600; } html.retro #gsearch input:focus { background-color: #fff; box-shadow: 2px 2px 0 var(--r-ink), 0 0 0 3px color-mix(in srgb, var(--r-accent-ink) 25%, transparent) inset; } html.retro #gsResults { border: 2px solid var(--r-ink); border-radius: 10px; background: var(--r-paper); box-shadow: 5px 5px 0 var(--r-ink); top: 44px; } html.retro #gsResults .row { border-bottom: 1px solid var(--r-line-soft); } html.retro #gsResults .row:hover { background: var(--accent-soft); } /* ---------- 카드 = 레트로 윈도우 ---------- */ html.retro .card { position: relative; background: var(--r-paper); border: 2px solid var(--r-ink); border-radius: 12px; box-shadow: 5px 5px 0 color-mix(in srgb, var(--r-ink) 88%, transparent); padding: 28px 16px 16px; margin-bottom: 18px; } html.retro .card::before { /* 컬러 타이틀 스트립 */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 13px; background: var(--r-accent); border-bottom: 2px solid var(--r-ink); border-radius: 9px 9px 0 0; } html.retro .card::after { /* 윈도우 점 3개 */ content: ''; position: absolute; top: 4px; left: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--r-paper); border: 1.6px solid var(--r-ink); box-shadow: 13px 0 0 -1.6px var(--r-paper), 13px 0 0 0 var(--r-ink), 26px 0 0 -1.6px var(--r-paper), 26px 0 0 0 var(--r-ink); } html.retro .card .card { box-shadow: 3px 3px 0 var(--r-ink); } /* 중첩 카드 얕게 */ /* ---------- 버튼 ---------- */ html.retro .btn { border: 2px solid var(--r-ink); border-radius: 9px; background: var(--r-paper); font-weight: 700; box-shadow: 2px 2px 0 var(--r-ink); transition: transform .06s, box-shadow .06s; } html.retro .btn:hover { background: #fff; border-color: var(--r-ink); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--r-ink); } html.retro .btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--r-ink); } html.retro .btn.primary { background: var(--r-accent); color: var(--r-accent-ink); border-color: var(--r-ink); font-weight: 800; } html.retro .btn.primary:hover { background: color-mix(in srgb, var(--r-accent) 82%, #fff); } html.retro .btn.danger { color: #fff; background: var(--danger); border-color: var(--r-ink); } html.retro .btn.danger:hover { background: #c73030; } html.retro .btn.sm { box-shadow: 1.5px 1.5px 0 var(--r-ink); border-width: 1.6px; border-radius: 7px; } html.retro .btn:disabled { opacity: .45; box-shadow: none; transform: none; } /* ---------- 입력 ---------- */ html.retro input.field, html.retro select.field, html.retro textarea.field { border: 2px solid var(--r-ink); border-radius: 9px; background: #fffdf4; } html.retro input.field:focus, html.retro select.field:focus, html.retro textarea.field:focus { border-color: var(--r-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-accent) 55%, transparent); } html.retro label.lb { color: var(--r-accent-deep); font-weight: 800; } /* ---------- 칩/뱃지/상태 ---------- */ html.retro .badge { border: 1.6px solid var(--r-ink); box-shadow: 1px 1px 0 var(--r-ink); } html.retro .chip { border: 1.4px solid var(--r-ink); background: var(--r-paper2); border-radius: 7px; font-weight: 600; } html.retro .chip.acc { background: var(--accent-soft); color: var(--r-accent-deep); } html.retro .ttype, html.retro .hk { border: 1.4px solid var(--r-ink); box-shadow: 1px 1px 0 var(--r-ink); } /* ---------- 테이블 ---------- */ html.retro table.tb { background: var(--r-paper); border: 2px solid var(--r-ink); } html.retro .tb th { background: var(--accent-soft); border: 1px solid var(--r-ink); color: var(--r-ink); font-weight: 800; font-size: 12.5px; top: var(--sticky-th, 53px); /* retro-theme.js 가 탑바 실측 높이로 갱신 */ } html.retro .tb td { border: 1px solid var(--r-line-soft); border-top: none; } /* v174 — 자체 스크롤 박스 안의 표는 그 박스 맨 위에 고정 */ html.retro .tbwrap[style*="overflow"] table.tb th, html.retro .tbwrap.tbwrap--sc table.tb th { top: 0; } html.retro .tb tr:hover td { background: color-mix(in srgb, var(--r-accent) 8%, var(--r-paper)); } html.retro .tb .code { color: var(--r-accent-deep); } html.retro .tb td.codecell { background: color-mix(in srgb, var(--r-accent) 14%, var(--r-paper)); } html.retro .tb img.thumb { border: 2px solid var(--r-ink); border-radius: 8px; } /* ---------- 카테고리 카드 ---------- */ html.retro .catcard { border: 2px solid var(--r-ink); border-radius: 11px; background: var(--r-paper); box-shadow: 3px 3px 0 var(--r-ink); } html.retro .catcard:hover { border-color: var(--r-ink); box-shadow: 5px 5px 0 var(--r-ink); transform: translate(-1px,-1px); } html.retro .catcard .cph { border: 2px solid var(--r-ink); border-radius: 8px; } html.retro .catcard .cc { color: var(--r-accent-deep); } html.retro .majorhead { border: 2px dashed color-mix(in srgb, var(--r-ink) 45%, transparent); background: color-mix(in srgb, var(--r-paper) 55%, transparent); } html.retro .majorsec { border-radius: 12px; } /* ---------- 창고 로드맵 ---------- */ html.retro .rmtabs .rmtab { border: 2px solid var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); background: var(--r-paper); } html.retro .rmtab.on { background: var(--r-accent); color: var(--r-accent-ink); } html.retro .rmtab.on small { color: var(--r-accent-ink); opacity: .7; } html.retro .rmzone { border: 2px solid var(--r-ink); border-radius: 11px; box-shadow: 4px 4px 0 var(--r-ink); background: var(--r-paper); } html.retro .rmzhead { border-bottom: 2px solid var(--r-ink); background: var(--r-paper2); font-weight: 800; } html.retro .rmcell { border: 1.6px solid var(--r-ink); border-radius: 5px; } html.retro td.rm-label { background: var(--r-paper2); border: 1.6px dashed var(--r-ink); color: var(--sub); } html.retro .rm-empty { background: #fffdf4; } /* ---------- 홈 워크스페이스 ---------- */ html.retro .hcard { border: 2px solid var(--r-ink); border-radius: 12px; background: var(--r-paper); box-shadow: 4px 4px 0 var(--r-ink); } html.retro .hcard .hh { color: var(--r-ink); } html.retro .htile { border: 2px solid var(--r-ink); background: var(--r-paper2); border-radius: 9px; box-shadow: 2px 2px 0 var(--r-ink); } html.retro .htile:hover { background: var(--accent-soft); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--r-ink); } html.retro .hstat { border: 1.6px solid var(--r-ink); background: var(--r-paper2); border-radius: 9px; } html.retro .hstat.warn { background: #ffedc2; } html.retro .hstat.neg { background: #ffd9d9; } html.retro .hfile a { color: var(--r-accent-deep); } /* ---------- 모달 ---------- */ html.retro #modalWrap { background: color-mix(in srgb, var(--r-ink) 55%, transparent); } html.retro #modal { position: relative; background: var(--r-paper); border: 2px solid var(--r-ink); border-radius: 12px; box-shadow: 8px 8px 0 color-mix(in srgb, var(--r-ink) 85%, transparent); padding: 34px 22px 20px; } html.retro #modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 16px; background: var(--r-accent); border-bottom: 2px solid var(--r-ink); border-radius: 9px 9px 0 0; } html.retro #modal::after { content: ''; position: absolute; top: 5px; left: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--r-paper); border: 1.6px solid var(--r-ink); box-shadow: 14px 0 0 -1.6px var(--r-paper), 14px 0 0 0 var(--r-ink), 28px 0 0 -1.6px var(--r-paper), 28px 0 0 0 var(--r-ink); } html.retro #modal h2 { font-weight: 900; } html.retro #modal .x { border: 2px solid var(--r-ink); background: var(--r-paper); border-radius: 8px; font-size: 15px; width: 28px; height: 28px; line-height: 1; color: var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); z-index: 1; } html.retro #modal .x:active { transform: translate(2px,2px); box-shadow: none; } /* ---------- 토스트 / 라이트박스 ---------- */ html.retro #toast { background: var(--r-paper); color: var(--r-ink); border: 2px solid var(--r-ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--r-ink); font-weight: 700; } html.retro #toast.err { background: var(--danger); color: #fff; } html.retro #lightbox img { border: 3px solid var(--r-paper); border-radius: 10px; box-shadow: 8px 8px 0 rgba(0,0,0,.5); } /* ---------- 로그인 ---------- */ html.retro #login { background: repeating-linear-gradient(-45deg, transparent 0 26px, color-mix(in srgb, var(--r-ink) 7%, transparent) 26px 52px), var(--r-accent); } html.retro #login .box { position: relative; border: 2.5px solid var(--r-ink); border-radius: 14px; background: var(--r-paper); padding: 46px 32px 34px; box-shadow: 9px 9px 0 var(--r-ink); } html.retro #login .box::before { content: 'ES-WMS.EXE'; position: absolute; top: 0; left: 0; right: 0; height: 26px; background: var(--r-ink); color: var(--r-paper); border-radius: 10px 10px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; } html.retro #login .box::after { content: '– ▢ ✕'; position: absolute; top: 5px; right: 10px; color: var(--r-paper); font-size: 10.5px; letter-spacing: 3px; font-weight: 900; } html.retro #login h1 { font-weight: 900; } html.retro .litabs { background: var(--r-paper2); border: 2px solid var(--r-ink); border-radius: 10px; } html.retro .litabs button { color: var(--sub); border-radius: 7px; } html.retro .litabs button.on { background: var(--r-accent); color: var(--r-accent-ink); box-shadow: 1.5px 1.5px 0 var(--r-ink); border: 1.6px solid var(--r-ink); font-weight: 800; } /* ---------- 채팅 ---------- */ html.retro .chatrooms { border: 2px solid var(--r-ink); border-radius: 11px; background: var(--r-paper); box-shadow: 4px 4px 0 var(--r-ink); } html.retro .chatrooms .rm { border-bottom: 1px solid var(--r-line-soft); } html.retro .chatrooms .rm.on { background: var(--r-accent); } html.retro .chatrooms .rm.on .nm, html.retro .chatrooms .rm.on .lt { color: var(--r-accent-ink); } html.retro .chatpane { border: 2px solid var(--r-ink); border-radius: 11px; background: color-mix(in srgb, var(--r-accent) 10%, var(--r-paper2)); box-shadow: 4px 4px 0 var(--r-ink); } html.retro .cmsg .bub { border: 1.6px solid var(--r-ink); box-shadow: 2px 2px 0 color-mix(in srgb, var(--r-ink) 80%, transparent); background: #fffdf4; border-radius: 10px; } html.retro .cmsg.mine .bub { background: var(--r-accent); color: var(--r-accent-ink); } html.retro .cmsg.bot .bub { background: var(--accent-soft); border: 1.6px solid var(--r-ink); } html.retro .chatinput { background: var(--r-paper); border-top: 2px solid var(--r-ink); border-radius: 0 0 9px 9px; } html.retro .chatinput textarea { border: 2px solid var(--r-ink); background: #fffdf4; } html.retro .codechip { background: var(--accent-soft); color: var(--r-accent-deep); border: 1.2px solid var(--r-ink); } html.retro .chatreply { background: var(--r-paper2); border-top: 2px solid var(--r-ink); } html.retro .cmsg .react { border: 1.4px solid var(--r-ink); background: var(--r-paper); } /* ---------- 갤러리 ---------- */ html.retro .gal img { border: 2px solid var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); } /* ---------- 모바일 하단바 ---------- */ @media (max-width: 860px) { html.retro #mnav { background: var(--r-paper); border-top: 2px solid var(--r-ink); } html.retro #mnav a.on { color: var(--r-accent-deep); } html.retro #topbar::after { display: none; } } /* ============================================================ 🎨 색상 커스터마이저 (retro-theme.js 가 생성하는 UI) ============================================================ */ #retroFab { position: fixed; right: 18px; bottom: 18px; z-index: 400; width: 46px; height: 46px; border-radius: 12px; font-size: 20px; border: 2px solid #1b1725; background: #fbf4e2; cursor: pointer; box-shadow: 3px 3px 0 #1b1725; display: flex; align-items: center; justify-content: center; transition: transform .07s, box-shadow .07s; } #retroFab:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #1b1725; } #retroFab:active { transform: translate(2px,2px); box-shadow: none; } #retroPanel { /* v71 — 🎨 플로팅 버튼을 없앴으므로 채팅 버튼 왼쪽 옆에 뜹니다 */ position: fixed; right: 84px; bottom: 22px; z-index: 401; width: 320px; max-width: calc(100vw - 30px); background: #fbf4e2; border: 2px solid #1b1725; border-radius: 12px; box-shadow: 6px 6px 0 #1b1725; display: none; overflow: hidden; font-size: 12.5px; color: #1b1725; max-height: min(560px, calc(100vh - 110px)); overflow-y: auto; } #retroPanel.show { display: block; } #retroPanel .rph { background: var(--r-accent, #ffb937); color: var(--r-accent-ink, #1b1725); border-bottom: 2px solid #1b1725; padding: 9px 12px; font-weight: 900; display: flex; align-items: center; gap: 7px; position: sticky; top: 0; z-index: 2; } #retroPanel .rph .rpx { margin-left: auto; cursor: pointer; border: 2px solid #1b1725; background: #fbf4e2; color: #1b1725; border-radius: 7px; width: 24px; height: 24px; font-size: 12.5px; line-height: 1; font-weight: 900; } #retroPanel .rps { padding: 11px 13px; border-bottom: 1.6px dashed #b5a98d; } #retroPanel .rps:last-child { border-bottom: none; } #retroPanel .rpt { font-size: 11.5px; font-weight: 800; color: #6f6553; margin-bottom: 7px; } #retroPanel .rpt b { color: #1b1725; } #retroPanel .rsw { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } #retroPanel .rsw button.sw { width: 27px; height: 27px; border-radius: 8px; border: 2px solid #1b1725; cursor: pointer; padding: 0; box-shadow: 1.5px 1.5px 0 #1b1725; transition: transform .06s; } #retroPanel .rsw button.sw:hover { transform: scale(1.12); } #retroPanel .rsw button.sw.on { outline: 2.5px solid #1b1725; outline-offset: 2px; transform: scale(1.1); } #retroPanel .rsw .swcustom { position: relative; width: 27px; height: 27px; border-radius: 8px; border: 2px dashed #1b1725; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13.5px; background: #fff; overflow: hidden; } #retroPanel .rsw .swcustom input { position: absolute; inset: -8px; opacity: 0; cursor: pointer; } #retroPanel .rbtn { border: 2px solid #1b1725; background: #fbf4e2; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 2px 2px 0 #1b1725; color: #1b1725; } #retroPanel .rbtn:active { transform: translate(2px,2px); box-shadow: none; } #retroPanel .rrow { display: flex; gap: 7px; flex-wrap: wrap; } #retroPanel .rnote { font-size: 11.5px; color: #6f6553; margin-top: 7px; line-height: 1.5; }