/* ========================================================================== WGLab 스킨 — Roundcube elastic 위에 브랜드 레이어를 얹는다. 메인 사이트(apps/astro)의 팔레트와 통일: 딥 다크 배경 + 오렌지 액센트 #ff5100 구조: 1) elastic 원본 CSS를 그대로 import (업데이트돼도 자동 반영) 2) 로그인 화면 - DOM이 작고 완전히 통제 가능하므로 풀 리디자인 3) 앱 UI - 라이트/다크 양쪽에서 통하는 액센트 리컬러만 적용 주의: elastic의 다크 테마는 로 동작하며 좌측 taskmenu의 테마 버튼 또는 OS의 prefers-color-scheme으로 전환된다. 여기서 강제로 켜지 않는 이유는 사용자의 선택을 뺏지 않기 위해서다. ========================================================================== */ @import url("../../elastic/styles/styles.min.css"); /* ========================================================================== 0. 폰트 — 메인 사이트(apps/astro)와 동일한 Noto Sans KR 로컬 호스팅 apps/astro/public/fonts 에서 실사용 굵기의 woff2만 복사해 왔다. 외부 CDN 의존 없음 → 오프라인·CSP 환경에서도 동일하게 렌더링된다. ========================================================================== */ @font-face { font-family: "Noto Sans KR"; font-style: normal; font-weight: 350; src: url("../fonts/NotoSans-DemiLight.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Noto Sans KR"; font-style: normal; font-weight: 400; src: url("../fonts/NotoSans-Regular.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Noto Sans KR"; font-style: normal; font-weight: 500; src: url("../fonts/NotoSans-Medium.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Noto Sans KR"; font-style: normal; font-weight: 700; src: url("../fonts/NotoSans-Bold.woff2") format("woff2"); font-display: swap; } :root { --wg-accent: #ff5100; --wg-accent-hover: #ff6a26; --wg-accent-dim: #db5d23; --wg-bg: #0a0a0a; --wg-bg-raised: #141414; --wg-bg-input: #1c1c1c; --wg-border: #2a2a2a; --wg-text: #ededed; --wg-text-muted: #8f8f8f; } /* ========================================================================== 1. 로그인 화면 ========================================================================== */ body.task-login { background-color: var(--wg-bg); background-image: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(255, 81, 0, 0.16), transparent 70%), radial-gradient(ellipse 60% 50% at 85% 105%, rgba(255, 81, 0, 0.07), transparent 70%); background-repeat: no-repeat; color: var(--wg-text); } body.task-login #layout-content, body.task-login #layout { background: transparent; border: 0; } /* WGLab 마스코트. 밝은 색 3D 캐릭터라 반전/필터 없이 그대로 쓴다. 어두운 배경에 뜨는 느낌이 나도록 아래쪽에만 은은한 그림자. */ body.task-login #logo { max-height: 96px; width: auto; margin-bottom: 1.5rem; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55)); } /* 로고 아래 서비스명 — 로고만 있으면 무슨 서비스인지 모호하다 */ body.task-login #layout-content::before { content: "WGLab Mail"; display: block; color: var(--wg-text); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: 0.35rem; } body.task-login #layout-content::after { content: "wglab.co.kr"; display: block; order: 99; color: var(--wg-text-muted); font-size: 0.75rem; letter-spacing: 0.06em; text-align: center; margin-top: 1.25rem; } body.task-login #login-form { background: rgba(20, 20, 20, 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--wg-border); border-radius: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 64px -12px rgba(0, 0, 0, 0.8); padding: 2rem 1.75rem 1.5rem; max-width: 25rem; } body.task-login #login-form td.title { color: var(--wg-text-muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; padding-bottom: 0.35rem; } body.task-login #login-form input.form-control { background: var(--wg-bg-input); border: 1px solid var(--wg-border); border-radius: 8px; color: var(--wg-text); padding: 0.65rem 0.8rem; height: auto; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.task-login #login-form input.form-control:hover { border-color: #3a3a3a; } body.task-login #login-form input.form-control:focus { background: var(--wg-bg-input); border-color: var(--wg-accent); box-shadow: 0 0 0 3px rgba(255, 81, 0, 0.18); color: var(--wg-text); outline: none; } /* 브라우저 자동완성이 흰 배경을 덮어쓰는 것 방지 */ body.task-login #login-form input:-webkit-autofill, body.task-login #login-form input:-webkit-autofill:focus { -webkit-text-fill-color: var(--wg-text); -webkit-box-shadow: 0 0 0 1000px var(--wg-bg-input) inset; caret-color: var(--wg-text); } body.task-login #login-form .formbuttons { margin-top: 1.5rem; } body.task-login #rcmloginsubmit, body.task-login #login-form button.mainaction { background: var(--wg-accent); border: 0; border-radius: 8px; color: #fff; font-weight: 600; letter-spacing: 0.01em; padding: 0.7rem 1rem; width: 100%; transition: background-color 0.15s ease, transform 0.06s ease; } body.task-login #rcmloginsubmit:hover, body.task-login #login-form button.mainaction:hover { background: var(--wg-accent-hover); } body.task-login #rcmloginsubmit:active, body.task-login #login-form button.mainaction:active { transform: translateY(1px); } body.task-login #rcmloginsubmit:focus-visible { outline: 2px solid var(--wg-accent); outline-offset: 3px; } body.task-login #login-footer, body.task-login .noscriptwarning { color: var(--wg-text-muted); font-size: 0.8125rem; } /* 로그인 실패 메시지 — 어두운 배경에 맞게 */ body.task-login #messagestack div.error { background: rgba(220, 38, 38, 0.14); border: 1px solid rgba(220, 38, 38, 0.4); border-radius: 8px; color: #fca5a5; } /* ========================================================================== 2. 앱 UI 액센트 리컬러 (라이트/다크 공통) ========================================================================== */ /* 기본 액션 버튼 */ .ui.button.mainaction, a.button.mainaction, button.mainaction, .btn-primary { background-color: var(--wg-accent); border-color: var(--wg-accent); color: #fff; } .ui.button.mainaction:hover, a.button.mainaction:hover, button.mainaction:hover, .btn-primary:hover { background-color: var(--wg-accent-hover); border-color: var(--wg-accent-hover); color: #fff; } /* 선택된 메일/폴더 항목 */ .listing li.selected > a, .listing tr.selected > td, table.listing tr.selected td { color: var(--wg-accent); } .listing li.selected, table.listing tr.selected { box-shadow: inset 3px 0 0 var(--wg-accent); } /* 읽지 않은 메일 카운트 배지 */ .listing li a .unreadcount, span.unreadcount { background-color: var(--wg-accent); color: #fff; } /* 좌측 태스크 메뉴 활성 항목 */ #taskmenu a.selected, #taskmenu a:active { color: var(--wg-accent); } #taskmenu a.selected::before { color: var(--wg-accent); } /* 포커스 링 통일 (접근성) */ input.form-control:focus, select.form-control:focus, textarea.form-control:focus { border-color: var(--wg-accent); box-shadow: 0 0 0 3px rgba(255, 81, 0, 0.15); } /* 링크 */ a:not(.button):hover { color: var(--wg-accent); } /* 드래그 선택 영역 */ ::selection { background: rgba(255, 81, 0, 0.3); } /* ========================================================================== 3. 타이포그래피 — 한글 가독성 elastic 기본은 Roboto라 한글이 시스템 폴백으로 떨어져 자간·굵기가 들쭉날쭉하다. 설치돼 있으면 Pretendard, 없으면 OS 기본 한글 폰트를 쓴다. 외부 CDN 의존 없음. ========================================================================== */ :root { /* 메인 사이트와 동일. 로컬 @font-face로 실어서 환경 편차가 없다 */ --wg-font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", Roboto, "Helvetica Neue", sans-serif; } body, input, select, textarea, button, .listing, #messagelist, .message-part div.pre { font-family: var(--wg-font); } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.003em; } /* 한글은 라틴보다 세로로 꽉 차서 기본 행간이 답답하다 */ #messagelist td.subject, .listing li a { line-height: 1.45; } /* ========================================================================== 4. 메시지 목록 다듬기 ========================================================================== */ /* 안읽은 메일을 색이 아니라 굵기로 구분 — 오렌지 남용을 피한다 */ #messagelist tr.unread td.subject span.subject { font-weight: 600; } /* 행 사이 여백을 살짝 넓혀 스캔하기 쉽게 */ #messagelist tbody tr td { padding-top: 0.45rem; padding-bottom: 0.45rem; } #messagelist tbody tr { transition: background-color 0.12s ease; } /* 날짜·발신자 같은 보조 정보는 톤다운 */ #messagelist td.date, #messagelist span.date { font-variant-numeric: tabular-nums; opacity: 0.75; } /* 첨부·플래그 아이콘이 액센트를 먹지 않도록 */ #messagelist td.flag span.flagged::before { color: var(--wg-accent); } /* ========================================================================== 5. 스크롤바 — 기본 스크롤바가 밝아서 다크에서 튄다 ========================================================================== */ * { scrollbar-width: thin; scrollbar-color: rgba(140, 140, 140, 0.45) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: rgba(140, 140, 140, 0.4); border: 2px solid transparent; background-clip: content-box; border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 81, 0, 0.55); } /* ========================================================================== 6. 모션 — 과하지 않게, 접근성 존중 ========================================================================== */ .ui.button, a.button, button, .listing li a { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }