/* =================================================================== style.css - 모든 화면(html)이 공통으로 불러 쓰는 유일한 스타일시트 아래 번호 순서대로 읽으면 전체 구조가 파악된다: 1. 디자인 토큰 및 테마 - 색상/그림자 등 CSS 변수(--color-primary 등) 2. 전역 리셋 및 레이아웃 - 브라우저 기본 스타일 초기화 + 페이지 뼈대 3. 헤더 및 내비게이션 - 상단 헤더바 4. 사이드바 및 라우팅 레이아웃 - 좌측 메뉴 + 중앙 콘텐츠 영역 5. 재사용 UI 컴포넌트 - 카드/표/배지/폼/버튼처럼 여러 화면에서 반복 사용 6. 화면별 스타일 - 로그인/대시보드/조직도/캘린더/채팅 등 화면 전용 스타일 7. 모달 오버레이 - 팝업창 + 토스트 알림 참고: 지금은 :root[data-theme="light"] 라이트 테마만 정의되어 있고 다크 테마(:root[data-theme="dark"])는 아직 없다. data-theme 속성 자체는 각 html의 에 이미 붙어 있으므로, 나중에 다크 테마를 추가하려면 여기에 [data-theme="dark"] 블록만 새로 정의하면 된다. =================================================================== */ /* ----------------------------------------------------------- 1. 디자인 토큰 및 테마 --색상/그림자 이름들은 모든 화면 css에서 var(--color-primary)처럼 가져다 쓴다. 브랜드 색을 바꾸고 싶으면 이 블록만 고치면 전체에 반영된다. ----------------------------------------------------------- */ :root[data-theme="light"] { --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #f1f5f9; --bg-hover: #e2e8f0; --bg-accent: #e0e7ff; --bg-glass: rgba(255, 255, 255, 0.8); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-on-accent: #ffffff; --color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-rgb: 79, 70, 229; --color-secondary: #0ea5e9; --color-accent: #8b5cf6; --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; --border-color: #e2e8f0; --border-accent: #c7d2fe; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08); --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.1); } /* ----------------------------------------------------------- 2. 전역 리셋 및 레이아웃 ----------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease; } html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', 'Noto Sans KR', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.5; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-secondary); } /* 스크롤바 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* 레이아웃 구조 */ .app-wrapper { display: flex; flex-direction: column; width: 100vw; height: 100vh; } /* ----------------------------------------------------------- 3. 헤더 및 내비게이션 ----------------------------------------------------------- */ .header { height: 64px; background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; z-index: 100; flex-shrink: 0; box-shadow: var(--shadow-sm); } .header-left { display: flex; align-items: center; gap: 1.5rem; } /* 글자를 그라데이션 색으로 칠하는 트릭: background에 그라데이션을 깔고 -webkit-background-clip:text로 배경을 글자 모양대로만 잘라낸 뒤, -webkit-text-fill-color:transparent로 원래 글자색을 투명하게 만든다 */ .logo { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .logo-box { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: var(--shadow-glow); -webkit-text-fill-color: #fff; /* logo-box 텍스트 채우기 색 초기화 */ } .header-right { display: flex; align-items: center; gap: 0.75rem; } .icon-btn { background: none; border: 1px solid var(--border-color); width: 36px; height: 36px; border-radius: 50%; color: var(--text-secondary); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; } .icon-btn:hover { background-color: var(--bg-tertiary); color: var(--text-primary); border-color: var(--text-muted); } .icon-btn .badge { position: absolute; top: -2px; right: -2px; background-color: var(--color-danger); color: #fff; font-size: 0.65rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-secondary); } .user-dropdown { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; padding: 0.3rem 0.6rem; border-radius: 8px; border: 1px solid transparent; } .user-dropdown:hover { background-color: var(--bg-tertiary); border-color: var(--border-color); } .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; overflow: hidden; } .user-details { display: flex; flex-direction: column; line-height: 1.2; } .user-name-text { font-size: 0.85rem; font-weight: 600; } .user-role-text { font-size: 0.7rem; color: var(--text-muted); } /* ----------------------------------------------------------- 4. 사이드바 및 라우팅 레이아웃 ----------------------------------------------------------- */ .main-body { display: flex; flex: 1; width: 100%; height: calc(100vh - 64px); overflow: hidden; } .sidebar { width: 240px; background-color: var(--bg-secondary); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; padding: 1.25rem 0.75rem; flex-shrink: 0; overflow-y: auto; } .sidebar-menu { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; } .sidebar-item a { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; color: var(--text-secondary); border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; } .sidebar-item a:hover { background-color: var(--bg-tertiary); color: var(--text-primary); } .sidebar-item.active a { background-color: var(--bg-accent); color: var(--color-primary); font-weight: 600; } .sidebar-group-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.75rem 0.75rem 0.25rem; } .sidebar-item.sub a { padding-left: 1.75rem; font-size: 0.85rem; } /* 화면 콘텐츠 컨테이너 */ .view-content { flex: 1; height: 100%; overflow-y: auto; padding: 2rem; background-color: var(--bg-primary); } .screen-section { display: none; max-width: 1200px; margin: 0 auto; animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .screen-section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* ----------------------------------------------------------- 5. 재사용 UI 컴포넌트 ----------------------------------------------------------- */ .card { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); } .card-title { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } /* 테이블 */ .table-container { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 8px; } .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; text-align: left; } .table th { background-color: var(--bg-tertiary); padding: 0.75rem 1rem; font-weight: 600; border-bottom: 1px solid var(--border-color); } .table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); } .table tr:last-child td { border-bottom: none; } .table tr.clickable { cursor: pointer; } .table tr.clickable:hover td { background-color: var(--bg-tertiary); color: var(--text-primary); } /* 배지 및 플래그 */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; } .badge-primary { background-color: var(--bg-accent); color: var(--color-primary); } .badge-success { background-color: rgba(52, 211, 153, 0.15); color: var(--color-success); } .badge-warning { background-color: rgba(251, 191, 36, 0.15); color: var(--color-warning); } .badge-danger { background-color: rgba(248, 113, 113, 0.15); color: var(--color-danger); } .badge-muted { background-color: var(--bg-tertiary); color: var(--text-secondary); } /* 출결현황 달력 전용 배지(정상출근/지각/휴가) - 위 .badge-*는 공지/결재 등 여러 화면이 같이 쓰는 공용 스타일이라 거기 색을 진하게 바꾸면 다른 화면에도 영향이 가서, 달력 배지만 따로 진한 색(흰 글씨 + 꽉 찬 배경)으로 뺐다. 특히 .badge-primary가 .cal-cell.today와 배경색(--bg-accent)이 겹쳐서 "오늘" 칸에서 휴가 배지가 거의 안 보이던 문제를 해결하기 위함 */ .attendance-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; color: #fff; } .attendance-badge-normal { background-color: var(--color-success); } .attendance-badge-late { background-color: var(--color-warning); } .attendance-badge-leave { background-color: var(--color-secondary); } /* 폼 */ .form-group { margin-bottom: 1.25rem; } .form-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-secondary); } .form-control { width: 100%; background-color: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.6rem 0.8rem; color: var(--text-primary); font-family: inherit; font-size: 0.9rem; outline: none; } .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); background-color: var(--bg-secondary); } textarea.form-control { min-height: 100px; resize: vertical; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.2rem; font-size: 0.875rem; font-weight: 600; border-radius: 8px; cursor: pointer; border: 1px solid transparent; outline: none; font-family: inherit; } .btn-primary { background-color: var(--color-primary); color: var(--text-on-accent); } .btn-primary:hover { background-color: var(--color-primary-hover); } .btn-secondary { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); } .btn-secondary:hover { background-color: var(--bg-hover); color: var(--text-primary); } .btn-success { background-color: var(--color-success); color: #fff; } .btn-danger { background-color: var(--color-danger); color: #fff; } .btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; } /* ----------------------------------------------------------- 6. 화면별 스타일 ----------------------------------------------------------- */ /* 로그인 화면 */ .login-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 40%), var(--bg-primary); display: flex; align-items: center; justify-content: center; z-index: 2000; } .login-card { width: 100%; max-width: 400px; padding: 2.5rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow-lg), var(--shadow-glow); } /* 대시보드 */ .profile-card-large { text-align: center; padding-top: 2rem; padding-bottom: 2rem; } .profile-avatar-large { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; overflow: hidden; margin: 0 auto 1rem; box-shadow: var(--shadow-glow); } .commute-info-box { margin-top: 1rem; background-color: var(--bg-tertiary); border-radius: 8px; padding: 0.75rem; font-size: 0.8rem; } .commute-row { display: flex; justify-content: space-between; margin-bottom: 0.4rem; } .commute-row:last-child { margin-bottom: 0; } .commute-val { font-weight: 700; font-family: 'Fira Code', monospace; } .approval-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; } .approval-stat-box { background-color: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.85rem; text-align: center; cursor: pointer; } .approval-stat-box:hover { border-color: var(--color-primary); } .approval-stat-count { font-size: 1.5rem; font-weight: 800; color: var(--color-primary); font-family: 'Fira Code', monospace; } /* 조직도 - "좌측 부서 트리 + 우측 직원 표" 2단 레이아웃. org.html뿐 아니라 채팅의 새 대화/초대 모달, 결재의 참조인 선택 모달도 이 클래스들을 그대로 재사용해서 같은 모양의 "부서 선택 → 직원 선택" 피커를 만든다. */ .org-container { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; height: 600px; } .org-tree { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; overflow-y: auto; } .org-node { padding: 0.5rem 0.75rem; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); } .org-node:hover { background-color: var(--bg-tertiary); color: var(--text-primary); } .org-node.active { background-color: var(--bg-accent); color: var(--color-primary); font-weight: 600; } .org-members { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; overflow-y: auto; } /* 메신저 (참고: 현재 어떤 html에서도 쓰이지 않는 클래스들이다. 실시간 채팅 화면은 이 대신 아래 ".chat-*" 클래스들을 사용한다) */ .messenger-container { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; height: 550px; } .messenger-menu { border-right: 1px solid var(--border-color); padding-right: 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .messenger-menu-item { padding: 0.5rem 0.75rem; border-radius: 6px; cursor: pointer; font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } .messenger-menu-item.active { background-color: var(--bg-accent); color: var(--color-primary); } /* 캘린더 */ .calendar-wrapper { display: flex; flex-direction: column; gap: 1rem; } .calendar-controls { display: flex; justify-content: space-between; align-items: center; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--border-color); border-left: 1px solid var(--border-color); } .cal-cell { height: 100px; background-color: var(--bg-secondary); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; overflow: hidden; position: relative; } /* 지난달/다음달로 넘어가는 칸(요일 맞추려고 채운 여백) - opacity로만 흐리게 하면 배경(흰색)이 그대로 비쳐서 구분이 잘 안 되길래, 칸 배경 자체를 살짝 어두운 회색(--bg-tertiary)으로 바꾸고 날짜 숫자도 옅은 색으로 같이 처리 */ .cal-cell.other-month { background-color: var(--bg-tertiary); } .cal-cell.other-month .cal-day-num { color: var(--text-muted); } .cal-cell-header { font-size: 0.75rem; font-weight: 700; display: flex; justify-content: space-between; } .cal-cell.today { background-color: var(--bg-accent); } .cal-cell.today .cal-day-num { background-color: var(--color-primary); color: #fff; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* 요일별 색상 - 토요일은 파란색, 일요일은 빨간색(흔한 달력 관례). 공휴일(IS_HOLIDAY)로 지정된 날짜도 요일과 무관하게 이 .sunday 클래스를 재사용해 빨간색으로 표시함 - calendar.js의 renderCalendarGrid() 참고 */ .calendar-day-header.sunday, .cal-day-num.sunday { color: var(--color-danger); } .calendar-day-header.saturday, .cal-day-num.saturday { color: var(--color-secondary); } /* 오늘이면서 주말인 칸은 원(circle) 배경이 항상 우선 적용됨(선택자 우선순위가 더 높음) */ /* 캘린더(calendar.js)가 .cal-event-layer 안에 grid-column/grid-row를 인라인 스타일로 지정해서 배치하는 일정 막대 -