/* ============================================================ ES-WMS 공홈(공식 홈페이지) 스타일 테마 (official-theme.css) - 일 때만 적용되는 스킨 + 레이아웃 전환 - 좌측 사이드바 → 상단 GNB(드롭다운 메뉴) 로 전면 개편 - 콘텐츠 센터 정렬(max-width), 화이트 카드, 소프트 섀도우 - 화면별 포인트 색상( --r-accent 계열 변수 )은 그대로 사용 ============================================================ */ html.official { --o-header-h: 60px; --o-sub-h: 58px; --o-ink: #1c2431; --o-line: #e6eaf2; --o-bg: #f4f6fa; --bg: var(--o-bg); --panel: #fff; --line: var(--o-line); --text: var(--o-ink); --sub: #677183; --accent: var(--r-accent, #2563eb); --accent-soft: color-mix(in srgb, var(--r-accent, #2563eb) 10%, #fff); --radius: 14px; } html.official body { background: var(--o-bg); font-size: 13.5px; } html.official ::selection { background: color-mix(in srgb, var(--r-accent) 30%, #fff); } /* ---------- 전체 레이아웃: 세로 스택 (헤더 → 서브헤더 → 콘텐츠) ---------- */ html.official #app { flex-direction: column; } /* ---------- 상단 헤더 (기존 사이드바를 GNB 로 전환) ---------- */ html.official #sidebar { width: 100%; height: var(--o-header-h); flex-direction: row; align-items: center; background: #fff; color: var(--o-ink); border-bottom: 1px solid var(--o-line); position: sticky; top: 0; z-index: 50; padding: 0 26px; gap: 18px; box-shadow: 0 1px 8px rgba(22, 32, 51, .05); } html.official #sidebar .logo { padding: 0; font-size: 17px; font-weight: 900; color: var(--o-ink); letter-spacing:-.3px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; } html.official #sidebar .logo::before { content: ''; width: 12px; height: 12px; border-radius: 4px; flex: none; background: linear-gradient(135deg, var(--r-accent), color-mix(in srgb, var(--r-accent) 55%, #1c2431)); } html.official #sidebar .logo small { display: none; } /* GNB: 대분류 = 상단 메뉴, 하위 = 호버 드롭다운 */ html.official #sidebar nav { flex: 1; overflow: visible; padding: 0; display: flex; align-items: center; height: 100%; } html.official #nav > div { margin: 0 !important; position: relative; height: 100%; display: flex; align-items: center; } html.official #nav > div > div:first-child { font-size: 13.5px !important; font-weight: 700 !important; color: #454f63 !important; padding: 8px 13px !important; letter-spacing:-.2px;!important; border-radius: 9px; cursor: pointer; white-space: nowrap; } html.official #nav > div > div:first-child:hover { background: #f1f4f9; color: var(--o-ink) !important; } html.official #nav > div > div:first-child > span:first-child { display: none !important; } /* 현재 화면이 속한 대분류: 포인트색 + 하단 인디케이터 */ html.official #nav > div:has(a.on) > div:first-child { color: var(--r-accent-deep, var(--r-accent)) !important; box-shadow: inset 0 -3px 0 var(--r-accent); border-radius: 9px 9px 0 0; background: color-mix(in srgb, var(--r-accent) 7%, #fff); } /* 드롭다운 패널 */ html.official #nav > div > div:last-child { display: none !important; position: absolute; top: calc(100% - 6px); left: 0; min-width: 236px; background: #fff; border: 1px solid var(--o-line); border-radius: 14px; padding: 7px; box-shadow: 0 16px 40px rgba(22, 32, 51, .14); z-index: 60; } html.official #nav > div:hover > div:last-child, html.official #nav > div:focus-within > div:last-child { display: block !important; } html.official #nav a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin: 1px 0; color: #3a4457; border-left: none; border-radius: 9px; font-size: 13.5px; font-weight: 600; } html.official #nav a:hover { background: #f1f4f9; color: var(--o-ink); } html.official #nav a.on { background: color-mix(in srgb, var(--r-accent) 10%, #fff); color: var(--r-accent-deep, var(--r-accent)); border-left: none; font-weight: 800; } /* 고객사·에이전시(플랫 메뉴) 는 상단에 그대로 나열 */ html.official #nav > a { height: auto; margin: 0 2px; padding: 8px 13px; } /* 헤더 우측: 사용자 정보 */ html.official #sidebar .foot { border-top: none; padding: 0; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--sub); flex-shrink: 0; background: none; } html.official #sidebar .foot > div { display: flex; align-items: center; gap: 6px; } html.official #sidebar .foot b { color: var(--o-ink); font-size: 13.5px; } html.official #sidebar .foot button { margin: 0; border: 1px solid #d7dde8; background: #fff; color: #4a5468; border-radius: 9px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; } html.official #sidebar .foot button:hover { border-color: var(--r-accent); color: var(--r-accent-deep); } /* ---------- 서브헤더 (페이지 타이틀 밴드) ---------- */ html.official #topbar { top: var(--o-header-h); padding: 13px 34px; background: #fff; border-bottom: 1px solid var(--o-line); z-index: 30; } html.official #topbar h1 { font-size: 20px; font-weight: 800; letter-spacing:-.4px; display: flex; align-items: center; gap: 10px; } html.official #topbar h1::before { content: ''; width: 5px; height: 22px; border-radius: 3px; background: var(--r-accent); flex: none; } html.official #gsearch input { border: 1px solid var(--o-line); border-radius: 99px; background-color: #f4f6fa; padding: 9px 14px 9px 36px; } html.official #gsearch input:focus { border-color: var(--r-accent); background-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-accent) 15%, transparent); } html.official #gsResults { border-radius: 14px; box-shadow: 0 16px 40px rgba(22,32,51,.16); } /* ---------- 콘텐츠: 센터 정렬 ---------- */ html.official #content { padding: 26px 34px 40px; width: 100%; max-width: 1280px; margin: 0 auto; } html.official #main::after { content: 'ⓒ 이에스(ES) 통합 재고 시스템'; display: block; text-align: center; color: #9aa4b6; font-size: 12.5px; padding: 18px 0 26px; border-top: 1px solid var(--o-line); margin-top: auto; background: #fff; } /* ---------- 카드 ---------- */ html.official .card { border: 1px solid var(--o-line); border-radius: 16px; padding: 22px; box-shadow: 0 1px 3px rgba(22, 32, 51, .05); margin-bottom: 18px; } /* ---------- 버튼 ---------- */ html.official .btn { border: 1px solid #d9dfea; border-radius: 10px; padding: 8px 15px; font-weight: 600; } html.official .btn:hover { border-color: #c3ccdc; background: #f7f9fc; } html.official .btn.primary { background: var(--r-accent); border-color: var(--r-accent); color: var(--r-accent-ink, #fff); box-shadow: 0 2px 8px color-mix(in srgb, var(--r-accent) 35%, transparent); } html.official .btn.primary:hover { background: color-mix(in srgb, var(--r-accent) 88%, #000); } html.official .btn.sm { border-radius: 8px; padding: 4px 10px; } /* ---------- 입력 ---------- */ html.official input.field, html.official select.field, html.official textarea.field { border: 1px solid #d9dfea; border-radius: 10px; padding: 9px 12px; } html.official input.field:focus, html.official select.field:focus, html.official textarea.field:focus { border-color: var(--r-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-accent) 14%, transparent); } html.official label.lb { color: #59637a; } /* ---------- 칩/뱃지/상태 ---------- */ html.official .chip { border-radius: 99px; background: #eef1f7; padding: 3px 10px; } html.official .chip.acc { background: color-mix(in srgb, var(--r-accent) 12%, #fff); color: var(--r-accent-deep); } html.official .ttype, html.official .hk { border-radius: 99px; padding: 2px 9px; } /* ---------- 테이블: 가로줄만 있는 공홈 스타일 ---------- 주의: table 에 overflow:hidden 을 주면 sticky th 의 기준이 테이블로 바뀌어 고정 헤더가 밀려 내려가므로 절대 금지 */ html.official table.tb { border: 1px solid var(--o-line); } html.official .tb th { background: #f8fafd; border: none; border-bottom: 2px solid #e3e8f2; padding: 11px 12px; font-weight: 800; color: #59637a; top: var(--sticky-th, 118px); /* retro-theme.js 가 헤더+서브헤더 실측 높이로 갱신 */ } html.official .tb td { border: none; border-bottom: 1px solid #eef1f6; padding: 10px 12px; } /* v174 — 자체 스크롤 박스 안의 표는 그 박스 맨 위에 고정 */ html.official .tbwrap[style*="overflow"] table.tb th, html.official .tbwrap.tbwrap--sc table.tb th { top: 0; } html.official .tb tr:hover td { background: color-mix(in srgb, var(--r-accent) 4%, #fff); } html.official .tb .code { color: var(--r-accent-deep, var(--r-accent)); } html.official .tb td.codecell { background: color-mix(in srgb, var(--r-accent) 7%, #fff); } html.official .tb img.thumb { border-radius: 10px; } /* ---------- 카테고리 카드 ---------- */ html.official .catcard { border-radius: 14px; border-color: var(--o-line); padding: 13px 14px; } html.official .catcard:hover { border-color: color-mix(in srgb, var(--r-accent) 55%, #fff); box-shadow: 0 8px 24px color-mix(in srgb, var(--r-accent) 16%, transparent); transform: translateY(-2px); } html.official .catcard .cc { color: var(--r-accent-deep, var(--r-accent)); } html.official .catcard .cph { border-radius: 10px; } html.official .majorhead { background: none; border-bottom: 2px solid #e3e8f2; border-radius: 0; padding: 8px 4px; } /* ---------- 창고 로드맵 ---------- */ html.official .rmtab { border: 1px solid #d9dfea; border-radius: 99px; } html.official .rmtab.on { border-color: var(--r-accent); background: color-mix(in srgb, var(--r-accent) 10%, #fff); color: var(--r-accent-deep); } html.official .rmzone { border-radius: 14px; border-color: var(--o-line); box-shadow: 0 1px 3px rgba(22,32,51,.05); } html.official .rmzhead { background: #f8fafd; } html.official .rmcell { border-radius: 7px; } /* ---------- 홈 워크스페이스 ---------- */ html.official .hcard { border-radius: 16px; border-color: var(--o-line); box-shadow: 0 1px 3px rgba(22,32,51,.05); padding: 17px 19px; } html.official .htile { border-radius: 10px; background: #f6f8fb; border-color: var(--o-line); } html.official .htile:hover { border-color: var(--r-accent); background: color-mix(in srgb, var(--r-accent) 8%, #fff); } html.official .hstat { border-radius: 12px; background: #f6f8fb; } html.official .hfile a { color: var(--r-accent-deep); } /* ---------- 모달 / 토스트 ---------- */ html.official #modalWrap { background: rgba(18, 26, 41, .5); backdrop-filter: blur(2px); } html.official #modal { border-radius: 18px; box-shadow: 0 28px 70px rgba(18,26,41,.3); padding: 24px 26px; } html.official #modal h2 { font-size: 17px; font-weight: 800; } html.official #toast { border-radius: 12px; background: #1c2431; } /* ---------- 로그인 ---------- */ html.official #login { background: radial-gradient(900px 500px at 15% 0%, color-mix(in srgb, var(--r-accent, #2563eb) 22%, transparent), transparent), radial-gradient(700px 420px at 100% 100%, color-mix(in srgb, var(--r-accent, #2563eb) 12%, transparent), transparent), #eef1f7; } html.official #login .box { border-radius: 20px; padding: 40px 36px 34px; width: 360px; position: relative; box-shadow: 0 24px 60px rgba(18,26,41,.16); border: 1px solid #fff; overflow: hidden; } html.official #login .box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--r-accent), color-mix(in srgb, var(--r-accent) 45%, #7c3aed)); } html.official #login h1 { font-size: 24px; letter-spacing:-.4px; } html.official .litabs { border-radius: 12px; } html.official .litabs button.on { color: var(--r-accent-deep); } /* ---------- 채팅 ---------- */ html.official .chatwrap { height: calc(100vh - var(--o-header-h) - 150px); } html.official .chatrooms { border-radius: 14px; } html.official .chatrooms .rm.on { background: color-mix(in srgb, var(--r-accent) 10%, #fff); } html.official .chatpane { border-radius: 14px; background: #f2f5f9; } html.official .cmsg .bub { border-radius: 14px; box-shadow: 0 1px 3px rgba(22,32,51,.07); } html.official .cmsg.mine .bub { background: var(--r-accent); color: var(--r-accent-ink, #fff); } html.official .cmsg.mine .bub .codechip { background: rgba(255,255,255,.85); } html.official .chatinput { border-radius: 0 0 13px 13px; } html.official .chatinput textarea { border-radius: 12px; } /* ---------- 갤러리 ---------- */ html.official .gal img { border-radius: 10px; } /* 좁은 창: GNB 압축 */ @media (max-width: 1280px) and (min-width: 861px) { html.official #sidebar { padding: 0 14px; gap: 10px; } html.official #sidebar .logo { font-size: 15px; } html.official #nav > div > div:first-child { font-size: 12.5px !important; padding: 7px 9px !important; } html.official #sidebar .foot { font-size: 12.5px; } } /* ---------- 모바일: 원래 방식(하단 탭바) 유지 ---------- */ @media (max-width: 860px) { html.official #sidebar { display: none; } html.official #topbar { top: 0; padding: 11px 14px; } html.official #topbar h1 { font-size: 17px; } html.official #content { padding: 12px 12px 80px; } html.official .tb th { top: 0; position: static; } } /* ---------- 🎨 커스터마이저 UI: 공홈 스타일로 재스킨 ---------- */ html.official #retroFab { border: 1px solid var(--o-line); background: #fff; box-shadow: 0 6px 20px rgba(22,32,51,.16); border-radius: 99px; } html.official #retroFab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(22,32,51,.2); } html.official #retroFab:active { transform: none; } html.official #retroPanel { border: 1px solid var(--o-line); border-radius: 16px; background: #fff; box-shadow: 0 20px 50px rgba(22,32,51,.22); color: var(--o-ink); } html.official #retroPanel .rph { border-bottom: 1px solid var(--o-line); background: var(--r-accent); color: var(--r-accent-ink); } html.official #retroPanel .rph .rpx { border: none; background: rgba(255,255,255,.85); border-radius: 8px; } html.official #retroPanel .rps { border-bottom: 1px solid #eef1f6; } html.official #retroPanel .rpt { color: #677183; } html.official #retroPanel .rsw button.sw { border: 1px solid rgba(0,0,0,.12); box-shadow: none; border-radius: 9px; } html.official #retroPanel .rsw button.sw.on { outline: 2.5px solid var(--o-ink); } html.official #retroPanel .rsw .swcustom { border: 1.5px dashed #b9c2d2; } html.official #retroPanel .rbtn { border: 1px solid #d9dfea; box-shadow: none; border-radius: 9px; background: #fff; } html.official #retroPanel .rbtn:active { transform: none; background: #f1f4f9; } html.official #retroPanel .rnote { color: #8a93a6; }