/* ============================================================ 근태도장 디자인 시스템 v4 — A안(엔터프라이즈 네이비) 색 토큰만 바꾸면 B안(보라)·C안(초록)으로 전환된다. ── 원칙 ── 1. 면에는 깊이를 준다. 흰 카드에 은은한 그림자. 2. 강조색은 하나, 대신 확실하게 쓴다. 3. 상태는 색 + 점 + 글자로 세 번 알린다. 4. 숫자는 크고 굵게. 고정폭. ============================================================ */ :root { /* 그림자 색. 스킨이 이 값만 바꾸면 그림자 색이 따라온다. 값은 기존 그대로다 */ --sh-rgb: 90, 65, 45; /* ============================================================ 근태도장 v5 — 먹·종이·인주 근거: docs/디자인/디자인원칙.md 종이에 인주로 찍는 도장. 색은 거기서 가져온다. 보라와 민트는 쓰지 않는다. 둘 다 이 제품의 색이 아니었다. ============================================================ */ /* ---- 종이 ---- */ --paper: #FFFFFF; /* 카드 */ --shell: #FAF8F4; /* 페이지 바탕. 따뜻한 쪽이다. 찬 회색은 아무 제품의 색도 아니다 */ --sunk: #F4F0E9; /* 눌린 면: 입력칸, 표 바닥, 비활성 */ --hover: #FBF8F3; /* 손이 닿은 줄 */ --line: #E7E1D8; --line-2:#F2EDE5; /* ---- 먹 ---- */ /* 순검정을 안 쓴다. 따뜻한 바탕 위의 중성 검정은 구멍처럼 보인다 */ --ink: #1A1714; --ink-2: #342E27; --text2: #6A625A; --text3: #9A9188; --text4: #BEB6AC; /* ---- 인주 ---- */ /* 면적 5% 를 넘기지 않는다. 로고·선택 표식·돈이 걸린 숫자·지우는 단추, 네 자리뿐 */ --acc: #C0392B; --acc-2: #9B2B20; --acc-3: #C0392B; --acc-soft: #FBEEEA; --acc-line: #EFD4CC; --acc-ink: #9B2B20; /* ---- 좌측 메뉴 ---- */ /* 선택된 칸을 빨간 알약으로 칠하지 않는다. 글자를 먹색으로 세우고 왼쪽에 인주 막대 하나만 찍는다. 그게 도장이다 */ --nav-bg: #FFFFFF; --nav-2: #F6F1EA; --nav-tx: #55504A; --nav-line: #EBE5DC; --nav-hover: #FAF6F1; --nav-on-bg: transparent; --nav-on-tx: #1A1714; --nav-brand: #1A1714; --nav-sub: #A89F94; --nav-foot: #A89F94; --nav-foot-b: #6A625A; --nav-shadow: 0 6px 16px -6px rgba(120,60,45,.35); /* ---- 상태. 넷뿐이다 ---- */ --danger: #C0392B; --danger-bg: #FBEEEA; --danger-line: #EFD4CC; --danger-2: #9B2B20; --warn: #9A6410; --warn-bg: #FCF4E6; --warn-line: #EEDFC2; --okc: #166B4E; --ok-bg: #E8F2EC; --ok-line: #CFE3D8; --info: #2A5A86; --info-bg: #EAF1F7; --info-line: #CFDEEB; --info-2: #EAF1F7; --info-2-line: #CFDEEB; --info-2-ink: #2A5A86; /* ---- 그림자 ---- */ /* 떠 있는 것에만 쓴다. 카드는 실선 하나로 나눈다. 색은 검정이 아니라 따뜻한 갈색이다. 종이 위의 검정 그림자는 때처럼 보인다 */ --sh: 0 1px 2px rgba(var(--sh-rgb),.06), 0 6px 16px -6px rgba(var(--sh-rgb),.14); --sh-lift: 0 2px 4px rgba(var(--sh-rgb),.07), 0 14px 32px -10px rgba(var(--sh-rgb),.22); --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --r-lg: 8px; --r: 8px; --r-sm: 4px; --ease: cubic-bezier(.2,.7,.3,1); /* ---- 기존 이름 연결 ---- */ --bg: var(--shell); --card: var(--paper); --hair: var(--line); --hair-2: var(--line-2); --edge: var(--line); --accent: var(--acc); --accent-2: var(--acc-2); --accent-soft: var(--acc-soft); --accent-line: var(--acc-line); --navy: var(--paper); --navy-2: var(--nav-2); --navy-line: var(--nav-line); --blue: var(--info); --blue-soft: var(--info-bg); --blue-line: var(--info-line); --teal: var(--okc); --mint: var(--okc); --mint-ink: var(--okc); --mint-bg: var(--ok-bg); --mint-bar: var(--ok-line); --mint-edge: var(--okc); --yellow-bg: var(--warn-bg); --yellow-ink: var(--warn); --yellow-bar: var(--warn-line); --yellow-edge: var(--warn); --violet-bg: var(--sunk); --violet-ink: var(--text2); --violet-bar: var(--line); --violet-edge: var(--text3); --red: var(--danger); --red-bg: var(--danger-bg); --sh-1: var(--sh); --sh-2: var(--sh-lift); } /* 자간을 거의 풀었다. 하이웍스는 0 인데 그건 나눔스퀘어 기준이다. Pretendard 로 0 을 쓰면 헐거워 보여서 -.005em 에서 멈췄다. */ body { font-size: 14px; line-height: 1.55; letter-spacing: -.005em; background: var(--shell); color: var(--ink); } .num, .stat b, table td, table th { font-variant-numeric: tabular-nums; } ::selection { background: var(--acc-soft); } :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; } /* ---------- 좌측 메뉴 ---------- */ .shell { grid-template-columns: 236px 1fr; } .side { background: var(--nav-bg); border-right: 1px solid var(--nav-line); padding: 0 0 var(--s4); gap: 0; } .brand { height: 62px; margin: 0; padding: 0 var(--s5); background: none; color: var(--nav-brand); border-bottom: 1px solid var(--nav-line); font-size: 16px; font-weight: 800; letter-spacing: -.03em; } /* 세로 flex 라서 메뉴가 길면 상호가 눌린다. 한 줄로 합치고 나서 30px 까지 줄었다. */ .brand { flex: none; } .brand i { box-shadow: none; width: 30px; height: 30px; font-size: 9.4px; } .brand small { color: var(--nav-sub); font-weight: 600; font-size: 13.5px; letter-spacing: -.03em; } button.brand:hover { background: var(--nav-hover); } button.brand:hover small { color: var(--acc); } button.brand:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; } nav { padding: var(--s2) var(--s3); gap: 2px; } .nav-grp { padding: 0 0 var(--s2); } .nav-h { margin: var(--s3) 0 var(--s1); padding: 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--nav-sub); } nav button { color: var(--nav-tx); border-radius: var(--r); padding: 0 var(--s3); height: 36px; font-size: 14px; font-weight: 500; gap: 10px; border-left: 0; transition: background .15s var(--ease), color .15s var(--ease); } nav button:hover { background: var(--nav-hover); color: var(--ink); } /* 선택 표시를 보라 알약에서 도장 테두리로 바꾼다. 이름이 근태도장이고 로고가 동그란 도장인데 제품 화면에 그 표식이 없었다. 색도 모양도 안 베끼고 우리 이름에서 나온 것이다. */ nav button.on { background: none; color: var(--acc); font-weight: 700; box-shadow: none; } nav button.on svg { position: relative; z-index: 1; } /* 아이콘(17px, x 12~29, 가운데 20.5)에 맞춰 27px. 글자 시작점까지 5px 가 뜬다. */ nav button.on::before { content: ''; position: absolute; left: 7px; top: 50%; width: 27px; height: 27px; margin-top: -13.5px; border: 1.4px solid var(--acc); border-radius: 50%; } nav button.on::after { content: ''; position: absolute; left: 10.5px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: .8px solid var(--acc); border-radius: 50%; opacity: .42; } nav button { position: relative; } /* 아이콘은 글자색을 안 따르고 늘 보라 선이다. 하이웍스 제품 화면이 그렇다. */ nav svg { width: 18px; height: 18px; opacity: 1; stroke-width: 1.6; color: var(--acc); } nav .cnt { background: var(--danger); color: #fff; min-width: 19px; height: 19px; font-size: 12px; font-weight: 700; } .side-foot { margin: auto var(--s3) 0; padding: var(--s3) 10px 0; border-top: 1px solid var(--nav-line); color: var(--nav-foot); font-size: 12px; } .side-foot b { color: var(--nav-foot-b); font-weight: 600; } .link { color: var(--nav-foot); font-size: 12.5px; } .link:hover { color: var(--acc-2); } /* ---------- 상단 ---------- */ .topbar { display: flex; align-items: center; gap: var(--s3); height: 62px; padding: 0 var(--s6); background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 4; } .topbar .co { font-weight: 700; font-size: 15px; letter-spacing: -.02em; } .topbar .date { color: var(--text3); font-size: 13.5px; } .topbar .spacer { margin-left: auto; } .quick { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); font-size: 13.5px; font-weight: 600; color: var(--text2); cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } .quick:hover { background: var(--hover); border-color: var(--text4); color: var(--ink); } .quick.b { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 6px 14px -8px rgba(var(--sh-rgb),.7); } .quick.b:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; } .topbar .user { display: flex; align-items: center; gap: var(--s2); font-size: 13.5px; color: var(--text2); padding-left: var(--s3); border-left: 1px solid var(--line); height: 22px; } /* ---------- 본문 ---------- */ .main { padding: 0; } /* 넓은 모니터에서 표가 끝없이 늘어나면 눈이 한 줄을 끝까지 못 따라간다. 1,340px 에서 멈추고 남는 자리는 비워 둔다. */ .main > .banner, .main > .page-head, .main > section { margin-left: var(--s6); margin-right: var(--s6); max-width: 1340px; } .main > .page-head { margin-top: var(--s6); } .main > section { padding-bottom: var(--s7); padding-top: var(--s2); } .page-head { display: block; } /* 아마란스는 58px 제목에 -1.45px 자간을 쓴다. 비율로 -0.025em 이다. 우리는 -.045em 으로 과하게 조여 답답했다. 업무 화면이라 두께는 하이웍스 쪽(굵게)을 따른다. */ .page-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.028em; } .page-head p { margin-top: 7px; font-size: 14.5px; } .page-head p { font-size: 14px; color: var(--text3); margin-top: 3px; } /* ---------- 카드 ---------- */ .card { background: var(--paper); border: 0; border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--sh); } .card + .card, .card + .grid, .grid + .card, .stats + .card, .card + .stats, .stats + .dash, .dash + .card { margin-top: var(--s4); } .card h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -.025em; } .card-head { border-bottom: 1px solid var(--line-2); margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4); padding: var(--s4) var(--s5); background: none; } .card-head .hd-acts { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s1); } .hd-note { margin: -2px 0 var(--s3); color: var(--text3); font-size: 13.5px; } .muted { font-size: 13.5px; color: var(--text3); } /* ---------- 지표 ---------- */ .stats { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; gap: var(--s3); background: none; border: 0; border-radius: 0; overflow: visible; } /* 흰 카드 다섯 장을 띄워 놓으면 다섯 덩어리가 각자 논다. 한 장 안에 세로 실선으로 나눈다. 홈페이지의 '왜 만들었나' 네 칸, '법정 의무' 세 칸과 같은 장치라 제품과 마케팅이 같은 말을 쓰게 된다. */ /* 칸 사이를 1px 띄우고 그 틈으로 바탕색이 비치게 한다. 세로선과 가로선이 저절로 생기고, 1240px 아래에서 3칸으로 접히든 900px 아래에서 2칸으로 접히든 선이 항상 맞는다. 칸마다 border-left 를 주면 접힐 때마다 둘째 줄 첫 칸에 선이 남는다. */ .stats { background: var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; gap: 1px; } .stats > * { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: var(--s5) !important; background: var(--paper) !important; position: relative; text-align: left; } button.stat { cursor: pointer; transition: background .14s var(--ease); } button.stat:hover { background: var(--hover) !important; } .stat span { display: block; font-size: 13.5px; font-weight: 600; color: var(--text3); } /* 직원이 세 명인 회사다. "재직 인원 3" 을 크게 띄울 이유가 없다. 지난 판에서 38px 로 키운 건 틀렸다. 되돌린다. */ .stat b { display: block; margin-top: 9px; font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; } /* 색은 칸 이름이 아니라 값에 붙인다. 0명이면 색이 없어야 한다. */ .stat.late b { color: var(--warn); } .stat.none b { color: var(--danger); } .stat small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--text4); } .stat.late b { color: var(--warn); } .stat.none b { color: var(--danger); } button.stat { cursor: pointer; text-align: left; font: inherit; transition: box-shadow .15s var(--ease), transform .15s var(--ease); } button.stat:hover { box-shadow: var(--sh-lift) !important; transform: translateY(-1px); } button.stat::after { content: '›'; position: absolute; right: var(--s4); bottom: 14px; font-size: 18px; line-height: 1; color: var(--text4); transition: color .15s var(--ease), transform .15s var(--ease); } button.stat:hover::after { color: var(--acc); transform: translateX(2px); } /* 첫 칸은 출근율 요약 */ .stats .hero span { color: var(--text2); } .stats .hero small { color: var(--text3); } .hero-wrap { display: flex; align-items: center; gap: var(--s4); } .hero-wrap svg { width: 86px; height: 86px; flex: none; } .hero-wrap .hero-tx { min-width: 0; } .hero-wrap .hero-tx b { font-size: 30px; margin-top: 9px; } .hero-wrap .hero-tx b em { font-style: normal; font-size: 15px; font-weight: 600; opacity: .8; margin-left: 4px; } /* ---------- 표 ---------- */ .table-card { padding: 0; } .table-card .card-head { margin: 0; padding: var(--s4) var(--s5); } th, td { padding: 14px var(--s4) 14px 0; font-size: 13.5px; border-bottom: 1px solid var(--line-2); } th:first-child, td:first-child { padding-left: var(--s5); } th:last-child, td:last-child { padding-right: var(--s5); } /* 표 머리에 회색 띠를 까는 건 부트스트랩 기본값 생김새다. 편집물에서 쓰는 표는 띠 대신 작은 라벨을 넓은 자간으로 놓고 그 아래 진한 선을 한 줄 긋는다. 그게 표를 표답게 만든다. */ th { background: none; color: var(--text3); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; padding-top: 15px; padding-bottom: 9px; border-bottom: 2px solid var(--ink-2); } td.num, td.r { text-align: right; } /* 제목도 그 칸 내용과 같은 쪽으로 맞춘다. 안 맞추면 제목과 숫자가 따로 논다. */ th.num, th.r, th[data-al="r"] { text-align: right; } th.c, td.c { text-align: center; } tbody tr td { transition: background .12s var(--ease); } tbody tr:hover td { background: var(--hover); } td.empty { padding: 52px var(--s5); color: var(--text3); } .who b { font-weight: 600; } .av { border-radius: var(--r-sm); background: var(--sunk) !important; color: var(--text2) !important; font-weight: 700; font-size: 12.5px; } /* ---------- 퇴직금 ---------- */ .sev-amt { display: flex; align-items: baseline; gap: 14px; padding: 18px 20px; border-radius: var(--r-md); background: var(--hover); } .sev-amt span { font-size: 13.5px; color: var(--text3); font-weight: 700; } .sev-amt b { font-size: 30px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .sev-f { margin: 10px 0 0; font-size: 13.5px; color: var(--text2); } .sev-notes { margin: 14px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.8; color: var(--text3); } /* ---------- 통상임금 고르기 ---------- */ .ord-list { display: grid; gap: 8px; margin-top: 14px; } .ord-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); } .ord-row input { width: 18px; height: 18px; margin-top: 2px; } .ord-row b { font-size: 14.5px; } .ord-row .tag { margin-left: 7px; vertical-align: 2px; } .ord-row p { margin: 5px 0 0; font-size: 13px; line-height: 1.6; color: var(--text2); } /* ---------- 지원금 후보 ---------- */ .sb-list { display: grid; gap: 12px; margin-top: 12px; } .sb-hit { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; } .sb-top { display: flex; align-items: center; gap: 9px; } .sb-top b { font-size: 16px; letter-spacing: -.03em; } .sb-line { margin: 9px 0 0; font-size: 14px; line-height: 1.65; color: var(--text2); } .sb-why { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--okc); font-weight: 600; } .sb-warn { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn); font-size: 13px; line-height: 1.65; font-weight: 600; } .sb-need { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-2); } .sb-need b { font-size: 12.5px; color: var(--text3); letter-spacing: -.02em; } .sb-need ul { margin: 7px 0 0; padding-left: 17px; font-size: 13.5px; line-height: 1.75; color: var(--text2); } .sb-src { margin: 11px 0 0; font-size: 12.5px; color: var(--text3); } .sb-src a { color: var(--acc); font-weight: 600; } .sb-none { margin: 12px 0 0; padding: 18px; border-radius: var(--r-md); background: var(--hover); font-size: 14px; line-height: 1.7; color: var(--text2); } .sb-miss { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--info-bg); font-size: 13.5px; line-height: 1.65; color: var(--info); } .sb-miss b { display: block; margin-bottom: 3px; } .sb-unk { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); } .sb-unk > b { font-size: 13.5px; } .sb-unk ul { margin: 9px 0 0; padding-left: 17px; font-size: 13.5px; line-height: 1.8; color: var(--text2); } .sb-unk .sub { display: block; color: var(--text3); font-size: 12.5px; } .sb-unk a { color: var(--acc); font-weight: 600; } .sb-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--text3); } /* ---------- 상태 ---------- */ .tag { height: 23px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 700; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; } .tag::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none; } .t-work, .t-ok { background: var(--ok-bg); color: var(--okc); } .t-off { background: var(--info-bg); color: var(--info); } .t-none, .t-wait { background: var(--hover); color: var(--text3); } .t-late, .t-warn { background: var(--warn-bg); color: var(--warn); } .t-early { background: var(--info-2); color: var(--info-2-ink); } .t-miss, .t-reject { background: var(--danger-bg); color: var(--danger); } .t-edit { background: var(--info-bg); color: var(--info); } /* ---------- 조작 ---------- */ /* 하이웍스 단추는 42~44px 다. 우리는 33px 이었다. 한글로 나란히 띄워 보니 차이가 컸다. 42px 쪽이 확실히 눌러야 할 것처럼 보인다. */ .btn { height: 42px; border-radius: var(--r-sm); font-size: 14px; font-weight: 700; padding: 0 16px; border: 1px solid var(--line); background: var(--paper); color: var(--text2); transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); } .btn:hover { background: var(--hover); border-color: var(--acc-line); color: var(--acc-ink); } .btn:active { transform: translateY(1px); } .btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; } .btn.dark:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; } .btn.mint { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 8px 18px -9px rgba(var(--sh-rgb),.85); } .btn.mint:hover { background: var(--acc-2); border-color: var(--acc-2); color: #fff; } .btn.sm { height: 28px; font-size: 13px; border-radius: var(--r-sm); padding: 0 10px; } .btn:disabled, button:disabled { opacity: .45; cursor: not-allowed; } .btn:disabled:hover { background: var(--paper); border-color: var(--line); color: var(--text2); } input, select, textarea { height: 33px; border-radius: var(--r); border: 1px solid var(--edge); background: var(--paper); font-size: 13.5px; color: var(--ink); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } input:focus, select:focus, textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--sh-rgb),.14); outline: none; } input::placeholder, textarea::placeholder { color: var(--text4); } .field label { font-size: 13px; font-weight: 600; color: var(--text2); } .field label .req { color: var(--danger); margin-left: 2px; } .field .hint { margin-top: var(--s1); font-size: 12.5px; color: var(--text3); } .msg { font-size: 13.5px; font-weight: 600; } .msg.success { color: var(--okc); } .msg.error { color: var(--danger); } /* ---------- 조회 조건 ---------- */ .toolbar { margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--paper); border: 0; border-radius: var(--r); box-shadow: var(--sh); gap: var(--s2); } .toolbar .tb-l { font-size: 13px; font-weight: 700; color: var(--text2); } .toolbar .tb-l + * { margin-right: var(--s2); } .toolbar .tb-acts { display: inline-flex; gap: var(--s1); margin-left: auto; } /* ---------- 알림 줄 ---------- */ .banner { border-radius: var(--r); padding: 11px var(--s4); font-size: 13.5px; font-weight: 600; background: var(--warn-bg); color: var(--warn); border: 0; } /* ---------- 대시보드 ---------- */ .dash { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s4); align-items: start; } .dash .col { display: grid; gap: var(--s4); } .doc-tabs { display: flex; gap: var(--s4); } .doc-tabs button { border: 0; background: none; padding: 0 0 3px; font-size: 14px; font-weight: 700; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s var(--ease), border-color .15s var(--ease); } .doc-tabs button:hover { color: var(--text2); } .doc-tabs button.on { color: var(--ink); border-bottom-color: var(--acc); } .doc-list { display: grid; gap: 0; min-height: 104px; } .doc-row { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--s3); align-items: center; padding: 12px 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; } .doc-row:first-child { border-top: 0; } .doc-row:hover { background: none; } .doc-row .k { font-size: 12px; font-weight: 700; color: var(--acc-ink); background: var(--acc-soft); border-radius: var(--r-sm); text-align: center; padding: 4px 0; } .doc-row .t { font-size: 14px; } .doc-row .t small { display: block; color: var(--text3); font-size: 12.5px; margin-top: 2px; } .doc-empty { display: grid; place-items: center; min-height: 104px; color: var(--text3); font-size: 13.5px; border: 0; border-radius: 0; } /* ---------- 조치 목록 ---------- */ .bf-sum { display: flex; gap: var(--s4); margin: 0 0 var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-2); } .bf-sum span { background: none; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--text3); } .bf-sum span b { font-size: 15px; font-weight: 800; } .bf-sum span.urgent { color: var(--danger); } .bf-sum span.todo { color: var(--warn); } .bf { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; padding: 13px 0; border-top: 1px solid var(--line-2); border-left: 0; } .bf:first-of-type { border-top: 0; } .bf::before { content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--text4); flex: none; } .bf.urgent::before { background: var(--danger); } .bf.todo::before { background: var(--warn-line); } .bf.soon::before { background: var(--text3); } .bf .lv { display: none; } .bf b { display: block; font-size: 14.5px; font-weight: 600; } .bf .g { display: none; } .bf .sub { margin-top: 2px; font-size: 13px; color: var(--text3); line-height: 1.5; } .bf-none { padding: var(--s4) 0; color: var(--okc); font-weight: 700; font-size: 14px; } .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .cal .hd { background: var(--hover); text-align: center; font-size: 12.5px; font-weight: 700; color: var(--text2); padding: 7px 0; } .cal .hd.sun { color: var(--danger); } .cal .hd.sat { color: var(--acc); } .cal .dy { background: var(--paper); min-height: 86px; padding: 6px 7px; } .cal .dy.out { background: var(--hover); } .cal .dy.today { box-shadow: inset 0 0 0 2px var(--acc); } .cal .dy.pick { cursor: pointer; } .cal .dy.pick:hover { background: var(--hover); } .cal .dy.sel { background: var(--acc-soft) !important; box-shadow: inset 0 0 0 2px var(--acc-2); } .ev.notice { background: var(--warn-bg); color: var(--warn); font-weight: 700; } .daybox { margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--hover); } .daybox h3 { margin: 0 0 var(--s3); font-size: 15px; letter-spacing: -.02em; } .dayrow { display: grid; grid-template-columns: 74px 1fr; gap: var(--s3); padding: 7px 0; border-top: 1px solid var(--line-2); font-size: 14px; } .dayrow:first-of-type { border-top: 0; } .dayrow b { font-size: 13.5px; } .cal .dy > b { font-size: 13px; font-weight: 700; color: var(--text2); } .cal .dy.hol > b, .cal .dy.s0 > b { color: var(--danger); } .cal .dy.s6 > b { color: var(--acc); } .ev { display: block; font-size: 11.5px; line-height: 1.35; margin-top: 3px; padding: 2px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev.leave { background: var(--acc-soft); color: var(--acc-ink); } .ev.field { background: var(--warn-bg); color: var(--warn); } .ev.overtime { background: var(--info-bg); color: var(--info); } .ev.holiday, .ev.off { background: var(--danger-bg); color: var(--danger); } .ev.training { background: var(--ok-bg); color: var(--okc); } .ev.task { background: var(--sunk); color: var(--acc-2); font-weight: 700; } .nt { display: grid; grid-template-columns: minmax(0, 54ch) auto; gap: var(--s3); align-items: start; justify-content: start; padding: var(--s3) 0; border-top: 1px solid var(--line-2); } .nt:first-child { border-top: 0; } .nt b { display: block; font-size: 15px; letter-spacing: -.02em; } .nt .sub { font-size: 13px; color: var(--text2); margin-top: 3px; white-space: pre-wrap; } .nt .meta { font-size: 12.5px; color: var(--text3); margin-top: 4px; } .nt .pin { font-size: 11.5px; font-weight: 700; color: var(--acc); } .tk { display: grid; grid-template-columns: minmax(0, 48ch) auto auto; gap: var(--s3); align-items: center; justify-content: start; padding: var(--s3) 0; border-top: 1px solid var(--line-2); } .tk:first-child { border-top: 0; } .tk b { display: block; font-size: 15px; letter-spacing: -.02em; } .tk .sub { font-size: 13px; color: var(--text2); margin-top: 3px; } .tk.late b { color: var(--danger); } .tk.done b { color: var(--text3); text-decoration: line-through; } .lw { display: grid; grid-template-columns: 92px 1fr auto; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-top: 1px solid var(--line-2); } .lw:first-child { border-top: 0; } .lw .d { font-size: 13px; font-weight: 700; color: var(--text2); font-variant-numeric: tabular-nums; } .lw .d small { display: block; font-weight: 600; font-size: 12px; margin-top: 2px; } .lw b { display: block; font-size: 14.5px; letter-spacing: -.02em; } .lw .sub { font-size: 13px; color: var(--text2); margin-top: 3px; line-height: 1.5; } .lw .law { font-size: 12.5px; color: var(--text3); margin-top: 3px; } .lw .st { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .lw .st.done { background: var(--ok-bg); color: var(--okc); } .lw .st.soon { background: var(--warn-bg); color: var(--warn); } .lw .st.late { background: var(--danger-bg); color: var(--danger); } .lw.late .d { color: var(--danger); } /* ---------- 마감 순서 ---------- */ .cl { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s3); align-items: start; padding: 12px 0; border-top: 1px solid var(--line-2); } .cl:first-of-type { border-top: 0; } .cl input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--acc); } .cl b { font-size: 14px; font-weight: 600; } .cl .sub { font-size: 13px; color: var(--text3); margin-top: 2px; } .cl.on b { color: var(--text3); text-decoration: line-through; } /* ---------- 달력 ---------- */ /* 위(428행)에서 .cal 을 7칸 격자로 선언해 뒀다. 여기서 안 풀면 머리말·날짜판·안내문이 그 격자의 1·2·3번 칸에 나란히 들어간다. 실제로 그랬다. 날짜판이 231px 로 쪼그라들고 안내문은 80x251px 세로 띠가 됐었다. */ .cal { display: block; /* 7칸 격자를 푼다 */ grid-template-columns: none; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--paper); } .cal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px var(--s3); background: var(--hover); color: var(--ink); border-bottom: 1px solid var(--line-2); } .cal-head b { font-size: 14px; font-weight: 700; } .cal-head button { width: 24px; height: 24px; border: 0; border-radius: var(--r-sm); background: var(--paper); color: var(--text2); cursor: pointer; font-size: 14px; box-shadow: 0 1px 2px rgba(var(--sh-rgb),.08); transition: background .15s var(--ease), color .15s var(--ease); } .cal-head button:hover { background: var(--acc-soft); color: var(--acc-ink); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-grid .wd { padding: 7px 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--text3); background: none; border-bottom: 1px solid var(--line-2); } .cal-grid .wd.sun { color: var(--danger); } .cal-cell { min-height: 42px; padding: 4px 5px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); font-size: 12.5px; } .cal-cell:nth-child(7n) { border-right: 0; } .cal-cell.other { color: var(--text4); } .cal-cell.sun span.d { color: var(--danger); } /* 달력의 '오늘' 과 '외근' 은 알려 주는 표시다. 누르는 자리가 아니라서 파랑으로 가른다. */ .cal-cell.today { background: var(--info-2); box-shadow: inset 0 0 0 1px var(--info-2-line); } .cal-cell .d { font-weight: 700; } .cal-cell .dot { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 4px; } .cal-cell .dot.lv { background: var(--info-bg); color: var(--info); } .cal-cell .dot.fd { background: var(--info-2); color: var(--info-2-ink); } .cal-note { margin: 0; padding: 9px var(--s3); border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--text4); } /* ---------- 타임라인 ---------- */ .legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 13px; color: var(--text2); } .legend i.lg { width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(var(--sh-rgb),.1); } .legend i.lg.ok { background: var(--mint-bar); } .legend i.lg.late { background: var(--yellow-bar); } .legend i.lg.early { background: var(--violet-bar); } .legend i.lg.miss { background: var(--danger-bg); background-image: repeating-linear-gradient(135deg, rgba(192,57,43,.4) 0 2px, transparent 2px 5px); } .tl-bar.miss, .blk.miss { background-image: repeating-linear-gradient(135deg, rgba(192,57,43,.25) 0 3px, transparent 3px 7px); } .tl-row { border-top: 1px solid var(--line-2); } .tl-track { background-image: linear-gradient(to right, var(--line-2) 1px, transparent 1px); } .tl-bar { border-radius: var(--r-sm); font-weight: 700; } .scroll-x { margin: 0 calc(var(--s5) * -1); padding: 0 var(--s5); } /* ---------- 세그먼트 ---------- */ .seg { display: inline-flex; flex-wrap: wrap; gap: 3px; margin: 0 0 var(--s4); padding: 4px; background: var(--hover); border-radius: var(--r); } .seg button { height: 30px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: none; font-size: 13.5px; font-weight: 700; color: var(--text2); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .seg button:hover { color: var(--ink); } .seg button.on { background: var(--paper); color: var(--acc-ink); box-shadow: 0 1px 3px rgba(var(--sh-rgb),.14); } /* ---------- 이행 현황 ---------- */ .duty { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s3); align-items: start; padding: 13px 0; border-top: 1px solid var(--line-2); } .duty:first-child { border-top: 0; } .sub { color: var(--text3); font-size: 13px; } /* ---------- 불러오는 중 ---------- */ .skel-wrap { display: grid; gap: var(--s3); } .skel-wrap.stats-skel { grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; } .skel { border-radius: var(--r-lg); background: linear-gradient(90deg, var(--acc-soft) 25%, var(--acc-soft) 37%, var(--acc-soft) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; } @keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .skel { animation: none; } * { transition: none !important; } } /* ---------- 반응형 ---------- */ @media (max-width: 1240px) { .stats, .skel-wrap.stats-skel { grid-template-columns: repeat(3, 1fr); } .stats .hero { grid-column: span 3; } } @media (max-width: 1180px) { .dash { grid-template-columns: 1fr; } } @media (max-width: 900px) { .stats, .skel-wrap.stats-skel { grid-template-columns: repeat(2, 1fr); } .stats .hero { grid-column: span 2; } } @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .side { position: static; height: auto; min-width: 0; overflow-x: hidden; } nav, .nav-grp { min-width: 0; } nav button { white-space: normal; } .topbar { padding: 0 var(--s4); overflow-x: auto; } .main > .banner, .main > .page-head, .main > section { margin-left: var(--s4); margin-right: var(--s4); } .toolbar .tb-acts { margin-left: 0; } } @media (max-width: 560px) { .stats, .skel-wrap.stats-skel { grid-template-columns: 1fr; } .stats .hero { grid-column: span 1; } } /* 괴롭힘 대응·안전보건 */ .t-warn { background: var(--yellow-bg); color: var(--yellow-ink); } .duty:first-child { border-top: 0; } /* 오늘 할 일 */ .duty .sub, .sub { color: var(--text3); font-size: 12.5px; } .law { color: var(--text4); font-size: 12px; margin-top: 2px; } textarea.prose { font-family: var(--font); font-size: 14.5px; } .pre { white-space: pre-wrap; } .ev { border-left: 3px solid var(--line); padding: 6px 12px; margin: 10px 0; } table.kv { width: 100%; } table.kv th { width: 110px; text-align: left; background: var(--hover); } table.kv td, table.kv th { border-bottom: 1px solid var(--line); vertical-align: top; } .checks { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 0; } .checks label { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; } .checks input { width: 16px; height: 16px; } .inline-form { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .inline-form input { width: 150px; } .shrow { display: grid; grid-template-columns: minmax(220px, 1.2fr) 120px 2fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .ra-tbl th, .ra-tbl td { padding: 4px 4px; font-size: 13px; white-space: nowrap; } .ra-tbl input { width: 130px; height: 30px; } .ra-tbl select { height: 30px; } @media (max-width: 760px) { .shrow { grid-template-columns: 1fr; } .duty { grid-template-columns: 80px 1fr; } .duty > div:last-child { grid-column: 2; } } /* 온라인 교육 */ .courses { display: grid; gap: 10px; } .course { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; } .course .ct { display: flex; align-items: center; gap: 6px; font-size: 15px; } .pbar { display: inline-block; width: calc(100% - 46px); height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; vertical-align: middle; } .pbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; } .pbar.ok i { background: var(--mint-ink); } .red { color: var(--red); } tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--hover); } .preview { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; max-height: 520px; overflow: auto; } .pslide { padding: 10px 0; border-top: 1px solid var(--line); } .pslide p { margin: 4px 0; } .pslide ul, .pslide ol { margin: 4px 0; padding-left: 20px; } .pbox { margin: 6px 0; padding: 8px 10px; border-radius: 6px; background: var(--blue-bg); font-size: 14px; } .ol-stats { grid-template-columns: repeat(4, 1fr); } @media (max-width: 760px) { .ol-stats { grid-template-columns: repeat(2, 1fr); } } .ev-tbl { width: 100%; } .ev-tbl td { padding: 4px 6px 4px 0; } .ev-tbl input, .ev-tbl select { height: 32px; } .field label input[type=checkbox] { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; } /* 서명 패드 */ .sp-wrap { position: relative; border: 1.5px dashed var(--text3); border-radius: 10px; background: var(--hover); } .sp-canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; } .sp-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text4); font-size: 15px; pointer-events: none; } .sp-bar { display: flex; justify-content: flex-end; margin-top: 4px; } .sp-clear { border: 0; background: none; color: var(--accent-2); font-weight: 600; cursor: pointer; font-size: 14px; } .pipe { display: flex; gap: 3px; flex-wrap: wrap; } .pipe span { padding: 2px 7px; border-radius: 10px; background: var(--bg); color: var(--text3); font-size: 12.5px; font-weight: 600; } .pipe span.ok { background: var(--mint-bg); color: var(--mint-ink); } .flow5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0; } .flow5 div { padding: 10px; border-radius: 8px; background: var(--bg); font-size: 13.5px; text-align: center; line-height: 1.5; } .flow5 b { display: block; font-size: 18px; color: var(--accent); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .two-col > .card { margin: 0; } .seal-view { min-height: 84px; display: flex; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; } @media (max-width: 900px) { .two-col, .flow5 { grid-template-columns: 1fr; } } /* 남은 정리 */ .fxrow, .fxfill input { border-color: var(--hair); } .pipe span { background: var(--hover); } .flow5 div { background: var(--hover); } .flow5 b { color: var(--accent); } .seal-view { border-color: var(--hair); border-radius: var(--r); } td .btn + .btn { margin-left: var(--s1); } tbody td:last-child:has(.btn) { text-align: right; } .sp-clear { color: var(--accent-2); } /* ============================================================ 브랜드 표현 레이어 제목이 어디서 시작하는지 눈으로 바로 잡히게 하는 장치. 소개서에서 쓰는 이중 언더라인을 제품 규모로 줄여 쓴다. ============================================================ */ .page-head h1 { position: relative; padding-bottom: 10px; } .page-head h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 2px; background: var(--accent); } .card h2 { display: inline-flex; align-items: center; } .card h2::before { content: ''; width: 3px; height: 12px; margin-right: 8px; border-radius: 2px; background: var(--accent); flex: none; } /* 머리글에 옅은 바탕을 깔아 구획이 한눈에 잡히게 한다 */ .table-card .card-head { border-radius: var(--r-lg) var(--r-lg) 0 0; } /* 문장 안에서 핵심만 강조할 때 */ .hl { color: var(--accent-2); font-weight: 700; } /* 시각 입력 되읽기 */ .tm { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; } .tm.ok { color: var(--ok, var(--okc)); } .tm.bad { color: var(--danger, var(--danger)); } /* 공급자 지원 접속 중임을 숨기지 않는다 */ .support-bar { position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 16px; background:var(--ink-2); color:#fff; font-size:14.5px; letter-spacing:-.01em; } .support-bar b { color:#fff; } .support-bar .btn { margin-left:auto; background:#fff; color:var(--ink-2); border-color:#fff; } /* 도움말 */ /* v1 에서 --navy 는 차림표 바탕(흰 종이)이다. 그걸 단추 바탕으로 쓰면 흰 동그라미에 흰 아이콘이 되어 아무것도 안 보인다. 먹색을 바로 쓴다. */ .help-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--ink-2); color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(var(--sh-rgb),.2), 0 10px 26px -6px rgba(var(--sh-rgb),.34); display: grid; place-items: center; transition: transform .12s var(--ease), filter .16s var(--ease); } .help-fab svg { width: 24px; height: 24px; } .help-fab:hover { transform: translateY(-1px); filter: brightness(1.15); } .help-fab:active { transform: scale(.96); } .help-panel { position: fixed; right: 22px; bottom: 82px; z-index: 41; width: min(400px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 48px rgba(var(--sh-rgb),.22); overflow: hidden; } .help-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); } .help-head b { font-size: 16px; letter-spacing: -.02em; } .help-x { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--text3); cursor: pointer; padding: 0 2px; } .help-ask { padding: 12px 16px; border-bottom: 1px solid var(--line); } .help-ask input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 15px; } .help-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; } .help-foot { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); } .help-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--text2); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: -.02em; } .help-back:hover { border-color: var(--ink-2); color: var(--ink-2); background: var(--sunk); } .help-sec { margin-bottom: 16px; } .help-sec h4 { margin: 0 0 6px; font-size: 15px; letter-spacing: -.02em; } .help-sec p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text2); white-space: pre-line; } /* 판단을 묻는 물음에 대한 답. 평범한 답처럼 보이면 안 된다. */ /* AI 가 쓴 답. 설명서 원문과 구분되어야 한다. 틀릴 수 있다는 표시를 함께 둔다. */ .help-ai { padding: 13px 14px; border-radius: 10px; background: var(--line-2); border: 1px solid var(--line); } .help-ai h4 { color: var(--ink-2); } .help-ai small { display: block; margin-top: 8px; font-size: 12px; color: var(--text3); } .help-guard { padding: 13px 14px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn-line); } .help-guard h4 { color: var(--warn); } .help-guard p { color: var(--warn); } .help-tel { display: inline-flex; align-items: center; height: 36px; margin-top: 11px; padding: 0 14px; border-radius: 8px; background: var(--warn); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; } .help-d { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; } .help-d div { font-size: 13.5px; line-height: 1.55; padding: 7px 10px; border-radius: 7px; } .help-d .ok { background: var(--ok-bg); color: var(--okc); } .help-d .info { background: var(--line-2); color: var(--ink-2); } .help-d .warn { background: var(--warn-bg); color: var(--warn); } .help-d .bad { background: var(--danger-bg); color: var(--danger-2); } .help-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .help-topics button { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 5px 11px; font: inherit; font-size: 13.5px; color: var(--text2); cursor: pointer; } .help-topics button:hover { border-color: var(--brand, var(--acc)); color: var(--brand, var(--acc)); } .help-lbl { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--text3); text-transform: uppercase; margin: 0 0 7px; } @media (max-width: 560px) { .help-panel { right: 10px; left: 10px; bottom: 76px; width: auto; } .help-fab { right: 14px; bottom: 14px; } } /* 자금 흐름 막대 */ .cfchart { display: flex; align-items: flex-end; gap: 10px; height: 100px; padding: 6px 0 0; } .cfbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; } .cfb { display: flex; align-items: flex-end; gap: 3px; height: 78px; } .cfb i { display: block; width: 10px; border-radius: 3px 3px 0 0; } .cfb .cin { background: var(--accent); } .cfb .cout { background: var(--line); border: 1px solid var(--edge); } .cfl { font-size: 12.5px; color: var(--text3); } .dot-in, .dot-out { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: -1px; } .dot-in { background: var(--accent); } .dot-out { background: var(--line); border: 1px solid var(--edge); } td.minus { color: var(--danger); } /* 근태가 본체다. 눈에 먼저 들어오게 둔다. */ .nav-grp-main { padding: 8px 6px 10px; margin: 0 -6px 6px; border-radius: 12px; background: var(--nav-2); } .nav-grp-main .nav-h { color: var(--acc-ink); font-weight: 700; letter-spacing: -.01em; } .nav-grp-main button[data-tab] { font-weight: 600; } /* 접었다 펴는 묶음 */ .nav-fold { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px 4px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; } .nav-fold .caret { margin-left: auto; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s var(--ease); } .nav-grp.folded .caret { transform: rotate(-45deg); } .nav-grp.folded button[data-tab] { display: none; } .nav-fold:hover { color: var(--ink); } /* 떠 있는 알림. 저장했는지 막혔는지 그 자리에서 알려 준다. */ .toast { position: fixed; left: 50%; bottom: 28px; translate: -50% 16px; opacity: 0; width: max-content; max-width: calc(100% - 48px); padding: 13px 20px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; text-align: center; box-shadow: 0 12px 32px -12px rgba(0,0,0,.45); transition: opacity .2s ease, translate .2s ease; pointer-events: none; z-index: 90; } .toast.show { opacity: 1; translate: -50% 0; } .toast.error { background: var(--danger); } @media (prefers-reduced-motion: reduce) { .toast { transition: none; } } .nav-fold .cnt-in { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--nav-2); color: var(--text3); font-size: 12px; font-weight: 700; text-align: center; } .nav-fold .cnt-in:empty { display: none; } .nav-fold .caret { margin-left: 6px; } .nav-grp:not(.folded) .nav-fold .caret { margin-left: auto; } /* 좁은 화면의 메뉴. 묶음 상자를 걷어내고 단추만 한 줄로 민다. 묶음 제목과 접기는 숨긴다. 접어 둔 묶음도 여기서는 다 보여야 한다. 안 그러면 메뉴가 사라진 것처럼 보인다. */ @media (max-width: 860px) { #tabs .nav-grp { display: contents; } #tabs .nav-h, #tabs .nav-fold { display: none; } #tabs .nav-grp.folded button[data-tab] { display: flex; } #tabs button[data-tab] { white-space: nowrap; flex: none; } #tabs { gap: 4px; } .side { padding: 12px 16px 0; } } /* 시작 안내. 첫 출근 도장을 찍기까지 꼭 필요한 것만 세 단계로 둔다. */ .setup { background: linear-gradient(180deg, var(--accent-soft), var(--paper) 72%); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s4); } .setup h2 { font-size: 19px; margin: 0 0 4px; } .setup > p { margin: 0 0 var(--s4); color: var(--text2); font-size: 14px; } .step { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--s3); align-items: start; padding: var(--s4) 0; border-top: 1px solid var(--accent-line); } .step:first-of-type { border-top: 0; } .step .no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--accent-line); color: var(--accent); font-size: 13px; font-weight: 800; } .step.ok .no { background: var(--okc); border-color: var(--okc); color: #fff; } .step b { display: block; font-size: 15.5px; } .step .why { margin-top: 3px; color: var(--text2); font-size: 13.5px; } .step .how { margin-top: 5px; color: var(--text3); font-size: 13px; } .step .st { margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--accent-2); } .step.ok .st { color: var(--okc); } .setup .fin { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--accent-line); color: var(--text2); font-size: 13.5px; } @media (max-width: 560px) { .step { grid-template-columns: 28px 1fr; } .step > div:last-child { grid-column: 2; } } /* ---------- 오늘 현황: 상한 합계와 지금 할 일 ---------- */ /* 금액이 주인공이다. 다만 '잃을 돈' 이 아니라 '법에 정해진 상한' 이라는 걸 글로 분명히 적어 둔다. 숫자만 크게 띄우고 말을 안 하면 그게 과장이 된다. */ .bf-cap { padding: var(--s5) 0 var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s5); } .bf-cap .amt { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; } .bf-cap .amt span { font-size: 14px; color: var(--text2); font-weight: 600; } .bf-cap .amt b { font-size: clamp(34px, 4vw, 46px); font-weight: 800; letter-spacing: -.055em; line-height: 1; color: var(--danger); font-variant-numeric: tabular-nums; } .bf-cap p { margin: var(--s3) 0 0; font-size: 13.5px; color: var(--text3); line-height: 1.65; max-width: 46em; } /* 지금 할 일 하나. 나머지와 크기 차이를 분명히 둬야 '하나만 하면 된다' 가 전달된다. */ .bf-one { padding: var(--s5) 0 var(--s4); } .bf-one .lv { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--danger); margin-bottom: var(--s3); } .bf-one.todo .lv { color: var(--warn); } .bf-one.soon .lv { color: var(--text3); } .bf-one h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.04em; line-height: 1.3; } .bf-one p { margin: var(--s3) 0 0; font-size: 15px; color: var(--text2); line-height: 1.65; max-width: 48em; } .bf-one .law { margin-top: var(--s3); font-size: 13px; color: var(--text3); } .bf-one .fine { margin-top: var(--s2); font-size: 15px; font-weight: 700; color: var(--danger); } .bf-one .act { margin-top: var(--s5); display: flex; gap: var(--s2); flex-wrap: wrap; } /* 나머지는 눈에 띄지 않아야 한다. 오늘 할 일은 위의 하나다. */ .bf-rest { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-2); } .bf-rest .h { font-size: 13px; font-weight: 700; color: var(--text3); margin-bottom: var(--s2); } .bf-rest .bf { padding: 10px 0; border: 0; border-top: 1px solid var(--line-2); align-items: center; } .bf-rest .bf:first-of-type { border-top: 0; } .bf-rest .bf b { font-size: 14px; font-weight: 600; } .bf-rest .bf .law { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text4); } /* ---------- 오늘 현황: 왼쪽 목록 / 오른쪽 금액판 ---------- 하이웍스가 쓰는 '왼쪽 세로 막대 글 목록 / 오른쪽 증거판' 문법이다. 금액을 글 옆에 세워 두면 "이게 왜 중요한지" 가 같은 눈높이에서 읽힌다. */ .bf-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; } .bf-two .bf-one { padding: 0; } .bf-two .bf-rest { margin-top: var(--s4); padding-top: var(--s4); } .bf-cap { padding: var(--s5) var(--s5) var(--s4); border: 0; margin: 0; background: var(--acc-soft); border-radius: var(--r-lg); } .bf-cap .amt b { font-size: clamp(30px, 3.2vw, 38px); } .bf-cap p { max-width: none; } /* 금액 내역. 어느 의무가 얼마인지 한 줄씩 */ .cap-row { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--acc-line); } .cap-row svg { width: 18px; height: 18px; flex: none; color: var(--acc); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cap-row b { flex: 1; font-size: 13.5px; font-weight: 700; } .cap-row em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--danger); } /* 왼쪽 목록의 세로 막대 */ .bf-one { border-left: 3px solid var(--acc); padding-left: var(--s4) !important; } @media (max-width: 1100px) { .bf-two { grid-template-columns: 1fr; } } /* ---------- 상담 띠 ---------- */ .helpbar { margin-top: var(--s5); background: var(--hover); border-radius: var(--r-lg); padding: var(--s5); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; } .helpbar b { display: block; font-size: 15px; font-weight: 700; } .helpbar p { margin-top: 3px; font-size: 13px; color: var(--text3); } .helpbar .act { margin-left: auto; display: flex; align-items: center; gap: var(--s3); } .helpbar .tel { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--acc-2); font-variant-numeric: tabular-nums; } .helpbar .tel svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ---------- 첫 화면 위젯 판 ---------- 카드 아홉 장이 세로로 쌓여 있어서 매일 아침 스크롤부터 해야 했다. 세 칸으로 나눈다. 왼쪽은 '지금 어떤가', 가운데는 '무엇을 해야 하나', 오른쪽은 '언제까지'. 표와 타임라인만 이 판 아래 전폭으로 둔다. */ .home { display: grid; grid-template-columns: 312px minmax(0, 1fr) 332px; gap: var(--s4); align-items: start; margin-bottom: var(--s4); } .hcol { display: grid; gap: var(--s4); min-width: 0; align-content: start; container-type: inline-size; } /* 두 칸짜리 안쪽 구성은 화면이 아니라 '이 칸' 이 넓을 때만 두 칸으로 둔다. 화면은 1600px 이라도 가운데 칸은 640px 라서, 화면 너비로 판단하면 글이 다 꺾인다. */ .hcol .bf-two { grid-template-columns: minmax(0, 1fr); } /* 한 칸일 때는 큰 일, 금액, 남은 일 순서다. 금액이 남은 일 24건 뒤로 가면 첫 화면에서 안 보인다. */ .bf-two > * { min-width: 0; } @container (min-width: 840px) { .bf-two { grid-template-columns: 1fr 1fr; } .bf-two .bf-a { grid-column: 1; grid-row: 1; } .bf-two .bf-b { grid-column: 1; grid-row: 2; } .bf-two .bf-c { grid-column: 2; grid-row: 1 / span 2; } } /* 좁아지면 오른쪽 칸이 아래로 내려가 전폭이 된다. 세 칸을 억지로 줄이면 숫자가 두 줄로 꺾인다. */ @media (max-width: 1340px) { .home { grid-template-columns: 300px minmax(0, 1fr); } .home .hcol:nth-child(3) { grid-column: 1 / -1; } } @media (max-width: 900px) { .home { grid-template-columns: minmax(0, 1fr); } .home .hcol:nth-child(3) { grid-column: auto; } } /* 숫자 칸은 들어가는 자리에 맞춰 알아서 접힌다. 오른쪽 칸에서는 두 칸, 전폭으로 내려가면 넉 칸이 된다. */ .hcol .stats { grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); } /* 회사 카드. 하이웍스 오피스 홈의 맨 왼쪽 위 카드 자리다. */ /* 이름은 mecard 다. who 는 표의 이름 칸이 이미 쓰고 있어서 쓸 수 없다. */ .mecard .mec-top { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-2); } .mecard .mec-top b { font-size: 16px; font-weight: 700; letter-spacing: -.025em; } .mecard .mec-top span { font-size: 12.5px; color: var(--text3); font-variant-numeric: tabular-nums; } .mecard .hero span { color: var(--text2); } .mecard .hero small { color: var(--text3); } /* 312px 칸이라 도넛을 한 치수 줄인다. */ .mecard .hero-wrap { gap: var(--s4); } .mecard .hero-wrap svg { width: 78px; height: 78px; } .mecard .hero-wrap .hero-tx { flex: 1; } .mecard .hero-wrap .hero-tx b { font-size: 27px; margin-top: 6px; } .mecard .hero-wrap .hero-tx small { margin-top: 6px; line-height: 1.5; } /* 바로가기. 하이웍스 오피스 홈의 앱 격자와 같은 자리다. 아이콘은 왼쪽 메뉴와 같은 선 그림을 쓴다. 두 벌을 만들지 않는다. */ .qgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .qgrid button { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 2px 11px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text2); cursor: pointer; letter-spacing: -.03em; white-space: nowrap; transition: background .14s var(--ease), color .14s var(--ease); } .qgrid button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--acc); } .qgrid button:hover { background: var(--hover); color: var(--ink); } /* 세 칸 안에서는 달력이 좁아진다. 날짜 칸 높이를 줄인다. */ .hcol .cal-cell { min-height: 38px; padding: 3px 4px; } /* ---------- 오피스 홈 겉모습 ---------- 하이웍스에서 잰 값으로 맞춘다. 세 칸이 똑같은 너비 (544px 씩이었다) 바탕이 옅은 색이고 카드가 흰색이라 카드가 떠 보인다 카드 사이 24px 바로가기가 선 그림이 아니라 꽉 찬 색 타일 카드 제목 앞에 작은 색 아이콘 색은 안 가져온다. 바탕만 아주 옅게 깔고 강조는 우리 보라를 쓴다. */ .home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .hcol { gap: 22px; } @media (max-width: 1340px) { .home { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .home { grid-template-columns: minmax(0, 1fr); } } /* 카드가 떠 보이려면 뒤가 흰색이면 안 된다. 아주 옅게 깐다. */ main { background: var(--info-bg); } /* 위쪽만 한 겹 더 깔아 카드가 올라와 보이게 한다. */ main::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 460px; background: linear-gradient(180deg, var(--info-line) 0%, rgba(220,229,246,0) 100%); pointer-events: none; } /* 제목 앞에 아이콘이 붙으면 보라 막대는 뺀다. 표식이 둘이면 둘 다 안 읽힌다. */ .card-head h2:has(.hi)::before { display: none; } .card-head:has(> .hi) h2::before { display: none; } .card-head > .hi { margin-right: -2px; } main { position: relative; } main > * { position: relative; } .home .card, .home .cal { border-radius: 14px; box-shadow: 0 1px 2px rgba(var(--sh-rgb),.045), 0 10px 24px -14px rgba(var(--sh-rgb),.16); } /* 카드 제목 앞 아이콘 */ .card-head h2 { display: flex; align-items: center; gap: 9px; } .hi, .qgrid i { display: grid; place-items: center; flex: none; border-radius: 7px; } .hi { width: 23px; height: 23px; } .hi svg { width: 14px; height: 14px; } .qgrid i { width: 42px; height: 42px; border-radius: 12px; } .qgrid i svg { width: 24px; height: 24px; } .hi svg, .qgrid i svg { fill: currentColor; stroke: none; } /* 색은 네 갈래만. 보라가 본색이고 나머지는 자리를 가르는 용도다. */ .hi.v, .qgrid i.v { background: var(--acc-soft); color: var(--acc); } .hi.b, .qgrid i.b { background: var(--info-bg); color: var(--info); } .hi.g, .qgrid i.g { background: var(--ok-bg); color: var(--okc); } .hi.o, .qgrid i.o { background: var(--warn-bg); color: var(--warn); } .hi.r, .qgrid i.r { background: var(--danger-bg); color: var(--danger-2); } /* 바로가기 타일 */ .qgrid { grid-template-columns: repeat(4, 1fr); gap: 4px 2px; } .qgrid button { gap: 9px; padding: 14px 2px 12px; font-size: 12px; color: var(--text2); } .qgrid button:hover { background: var(--hover); color: var(--ink); } .qgrid button:hover i { transform: translateY(-1px); } .qgrid i { transition: transform .15s var(--ease); } /* 회사 카드 안에 숫자 넉 칸을 넣는다. 하이웍스 프로필 카드와 같은 짜임이다. */ .mecard { padding-bottom: var(--s4); } /* 1px 틈으로 선을 만드는 방법은 칸 높이가 같을 때만 맞는다. 여기는 넉 칸 높이가 제각각이라 틈이 벌어진다. 선을 직접 긋는다. */ .mecard .stats { margin-top: var(--s4); grid-template-columns: 1fr 1fr; background: none; border-radius: 0; box-shadow: none; gap: 0; border-top: 1px solid var(--line-2); } .mecard .stats > * { padding: 13px 14px !important; } .mecard .stats > *:nth-child(2n) { box-shadow: inset 1px 0 0 var(--line-2) !important; } .mecard .stats > *:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--line-2) !important; } .mecard .stats > *:nth-child(2n+4) { box-shadow: inset 1px 0 0 var(--line-2), inset 0 1px 0 var(--line-2) !important; } .mecard .stat span { font-size: 12.5px; } .mecard .stat b { margin-top: 5px; font-size: 21px; } .mecard .stat small { margin-top: 4px; font-size: 11.5px; } .mecard button.stat::after { right: 11px; bottom: 9px; font-size: 15px; } .mecard button.stat:hover { transform: none; box-shadow: none !important; background: var(--hover) !important; } /* 세 칸이 같은 너비라 가운데도 420px 쯤이 된다. 도넛을 더 줄인다. */ .mecard .hero-wrap svg { width: 70px; height: 70px; } .mecard .hero-wrap .hero-tx b { font-size: 25px; } /* ---------- 어느 화면이든 같은 어휘 ---------- 첫 화면만 바꿔 놓으니 다른 화면으로 넘어가는 순간 다른 제품처럼 보였다. 바탕, 카드, 제목, 표, 거르개를 전부 같은 규칙으로 맞춘다. */ /* 카드는 어느 화면에서나 옅은 바탕 위에 떠 있다 */ .card, .cal, .stats { border-radius: 14px; box-shadow: 0 1px 2px rgba(var(--sh-rgb),.045), 0 10px 24px -14px rgba(var(--sh-rgb),.16); } .table-card { overflow: hidden; } /* 화면 제목 왼쪽 아이콘. 묶음마다 색을 달리해 지금 어느 갈래에 있는지 색으로도 알 수 있게 한다. */ .page-head h1 { display: flex; align-items: center; gap: 11px; } .page-head .hi { width: 34px; height: 34px; border-radius: 10px; } .page-head .hi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .page-head .hi:empty { display: none; } .page-head .hi.g-attend { background: var(--acc-soft); color: var(--acc); } .page-head .hi.g-board { background: var(--info-bg); color: var(--info); } .page-head .hi.g-req { background: var(--info-bg); color: var(--info); } .page-head .hi.g-pay { background: var(--ok-bg); color: var(--okc); } .page-head .hi.g-hr { background: var(--warn-bg); color: var(--warn); } .page-head .hi.g-law { background: var(--danger-bg); color: var(--danger-2); } .page-head .hi.g-ops { background: var(--line); color: var(--text2); } /* 왼쪽 메뉴 아이콘도 같은 색으로. 메뉴와 제목이 같은 색이면 길을 잃지 않는다. */ .nav-grp[data-grp="attend"] nav button svg, [data-grp="attend"] button svg { color: var(--acc); } [data-grp="board"] button svg, [data-grp="req"] button svg { color: var(--info); } [data-grp="pay"] button svg { color: var(--okc); } [data-grp="hr"] button svg { color: var(--warn); } [data-grp="law"] button svg { color: var(--danger-2); } [data-grp="ops"] button svg { color: var(--text2); } /* 고른 항목의 도장 테두리는 늘 보라다. 색을 따라가면 표식이 안 읽힌다. */ nav button.on::before, nav button.on::after { border-color: var(--acc) !important; } /* 표 머리에 옅은 띠. 전에는 띠 대신 작은 라벨에 넓은 자간을 썼다. 편집물 표에는 그게 맞지만 하루에 수십 줄을 세는 업무 표에서는 띠가 줄을 가른다. */ th { background: var(--shell); color: var(--text2); font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--line); } thead th:first-child { border-top-left-radius: 0; } /* 거르개를 알약으로. 하이웍스 전자결재의 전체 0, 대기 0, 확인 0 이 이 모양이다. */ .doc-tabs { gap: 6px; } .doc-tabs button { height: 31px; padding: 0 13px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--text2); background: var(--shell); border-bottom: 0; } .doc-tabs button:hover { background: var(--line-2); color: var(--ink); } .doc-tabs button.on { background: var(--ink); color: #fff; border-bottom: 0; } /* 비어 있을 때. 글만 덩그러니 있으면 고장난 것처럼 보인다. 회색 그림 하나를 놓으면 '비어 있음' 이 상태로 읽힌다. */ td.empty, .doc-list .empty, .msg.empty { text-align: center; } td.empty::before, .doc-list .empty::before { content: ''; display: block; width: 38px; height: 38px; margin: 0 auto 12px; border-radius: 10px; background: var(--line-2); -webkit-mask: var(--emptymark) center / 21px 21px no-repeat; mask: var(--emptymark) center / 21px 21px no-repeat; } td.empty::after, .doc-list .empty::after { content: ''; position: absolute; } :root { --emptymark: url("data:image/svg+xml;utf8,"); } /* ---------- 한 걸음 더 ---------- 벤치마킹에서 가져온 것 중 색 쓰는 방식을 버린다. 하이웍스는 파스텔 타일을 열일곱 개 깐다. 눈이 쉴 데가 없고 중요한 것과 안 중요한 것이 같은 세기로 외친다. 색은 상태에만 쓴다. 지금 여기, 위험, 주의. 그 셋뿐이다. 자리는 활자와 여백으로 가른다. */ /* 바탕. 파랑을 뺀다. 중성 회색이라야 보라 강조가 산다. */ main { background: var(--shell); } main::before { display: none; } /* 그림자를 좁힌다. 넓게 번지면 흐릿해 보이고 좁으면 또렷해 보인다. 테두리 실선 한 줄을 같이 둬서 흰 바탕에서도 카드 끝이 보이게 한다. */ .card, .cal, .stats { border: 1px solid rgba(var(--sh-rgb),.055); box-shadow: 0 1px 1px rgba(var(--sh-rgb),.03), 0 5px 12px -7px rgba(var(--sh-rgb),.13); } .home .card, .home .cal { box-shadow: 0 1px 1px rgba(var(--sh-rgb),.03), 0 5px 12px -7px rgba(var(--sh-rgb),.13); } /* 아이콘 타일을 중성으로. 색은 '지금 여기' 와 '위험' 에만 남긴다. */ .hi, .qgrid i { background: var(--line-2); color: var(--ink-2); } .hi.v, .hi.b, .hi.g, .hi.o, .qgrid i.v, .qgrid i.b, .qgrid i.g, .qgrid i.o { background: var(--line-2); color: var(--ink-2); } .hi.r, .qgrid i.r { background: var(--danger-bg); color: var(--danger-2); } /* 지금 보고 있는 화면만 보라다. 이게 '여기' 를 뜻하는 유일한 색이다. */ .page-head .hi, .page-head .hi.g-attend, .page-head .hi.g-board, .page-head .hi.g-req, .page-head .hi.g-pay, .page-head .hi.g-hr, .page-head .hi.g-law, .page-head .hi.g-ops { background: var(--acc-soft); color: var(--acc); } /* 왼쪽 메뉴도 중성으로 되돌린다. 묶음마다 색을 주니 메뉴가 먼저 외쳤다. */ [data-grp] button svg { color: var(--text3); } nav button.on svg { color: var(--acc); } nav button:hover svg { color: var(--text2); } /* 바로가기 타일. 색을 뺀 자리를 눌림으로 채운다. */ .qgrid button:hover i { background: var(--acc-soft); color: var(--acc); transform: none; } .qgrid i { transition: background .14s var(--ease), color .14s var(--ease); } /* 활자 층위. 하이웍스는 전부 14px 한 층이라 순서가 색으로만 읽힌다. 다섯 층을 세우면 색이 없어도 순서가 읽힌다. */ /* 라벨: 무엇을 재는지 */ .stat span, .card-head .hd-acts.sub, th { font-size: 11.5px; font-weight: 700; letter-spacing: .055em; color: var(--text3); } /* 숫자: 값 */ .stat b { font-size: 28px; font-weight: 800; letter-spacing: -.045em; margin-top: 10px; } .mecard .stat b { font-size: 24px; } .stat small { font-size: 12px; letter-spacing: -.01em; font-weight: 400; } /* 화면 이름 */ .page-head h1 { font-size: 31px; letter-spacing: -.032em; } /* 표 머리. 띠는 남기되 거의 안 보이게 둔다. 하이웍스처럼 진한 띠를 깔면 머리가 내용보다 세다. */ th { background: var(--shell); padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } /* 거르개. 꽉 찬 회색 알약 네 개가 나란히 있으면 다 눌린 것처럼 보인다. 안 고른 것은 비우고 고른 것만 채운다. */ .doc-tabs button { background: none; border: 1px solid var(--line); color: var(--text3); font-weight: 600; } .doc-tabs button:hover { background: var(--hover); border-color: var(--text4); color: var(--ink); } .doc-tabs button.on { background: var(--ink); border-color: var(--ink); color: #fff; } /* 카드 제목과 아이콘 사이를 좁힌다. 둘이 한 덩어리로 읽혀야 한다. */ .card-head h2 { gap: 8px; } .hi { width: 22px; height: 22px; border-radius: 6px; } .hi svg { width: 13px; height: 13px; } .page-head .hi { width: 36px; height: 36px; border-radius: 11px; } .page-head .hi svg { width: 21px; height: 21px; } /* 카드 사이 여백을 넓힌다. 활자로 가르려면 숨 쉴 자리가 있어야 한다. */ .home, .hcol { gap: 20px; } /* 장식으로 쓴 보라를 뺀다. 화면 제목에 보라 아이콘이 붙은 순간 그 밑줄과 카드 막대는 같은 말을 두 번 하는 것이다. 카드 제목은 15.5px 700 이라 본문 13.5px 400 과 이미 층이 다르다. 막대가 없어도 읽힌다. */ .page-head h1::after { display: none; } .card h2::before { display: none; } .card h2 { margin-left: 0; } /* ---------- 먹색 브리핑 판 ---------- 설치하고 첫 2주는 '뭘 해야 하지' 가 질문이고, 그다음부터는 '오늘 뭐 왔지' 다. 한 화면이 두 시기를 다 받아야 한다. 급한 게 있으면 이 판이 맨 위에 서고, 다 처리하면 통째로 사라져 작업대가 올라온다. 설정으로 고르게 하지 않는다. 화면 모양을 고르는 것도 일이다. */ /* 밝은 화면 한가운데 검은 판을 놓지 않는다 (디자인원칙 결정 6). 대신 결재 서류처럼 보이게 한다. 누런 종이에 인주 도장이 찍혀 있는 판이다. 바탕과 같은 집안의 색이라 화면에서 떠오르지 않고, 그래도 눈에 먼저 든다. */ .bt { position: relative; overflow: hidden; margin-bottom: var(--s4); background: var(--sunk); color: var(--ink); border-radius: var(--r); padding: 34px 40px 30px; box-shadow: inset 0 0 0 1px var(--line); } /* 뒤에 깔린 두 겹 동그라미는 도장 테두리다. 이름에서 나온 표식이라 빌려온 게 아니다. */ .bt::after { content: ''; position: absolute; right: -72px; top: -72px; width: 320px; height: 320px; border: 1.5px solid rgba(192,57,43,.16); border-radius: 50%; pointer-events: none; } .bt::before { content: ''; position: absolute; right: -22px; top: -22px; width: 218px; height: 218px; border: 1px solid rgba(192,57,43,.11); border-radius: 50%; pointer-events: none; } .bt > * { position: relative; } .bt-eye { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .055em; color: var(--text3); } .bt h2 { margin-top: 13px; font-size: 34px; font-weight: 800; letter-spacing: -.042em; line-height: 1.26; max-width: 17em; color: var(--ink); } .bt-sub { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--text2); max-width: 34em; } .bt-law { margin-top: 9px; font-size: 13px; color: var(--text3); } .bt-act { margin-top: 24px; display: flex; gap: 9px; flex-wrap: wrap; } /* 기본 단추는 먹색이다. 인주가 아니다. 저장 단추가 빨가면 지우는 단추처럼 보인다 */ .bt-b { height: 46px; padding: 0 22px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: 700 14.5px/1 inherit; letter-spacing: -.02em; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease); } .bt-b:hover { background: var(--hover); border-color: var(--text4); } .bt-b.p { background: var(--ink); border-color: var(--ink); color: #fff; } .bt-b.p:hover { background: var(--ink-2); border-color: var(--ink-2); } /* 금액은 오른쪽 위. 글과 같은 줄에 두면 둘 다 안 읽힌다. 돈이 걸린 숫자는 인주로 쓴다. 이 제품에서 빨강이 허용된 네 자리 중 하나다. */ .bt-rail { position: absolute; right: 40px; top: 34px; text-align: right; } .bt-rail span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .055em; color: var(--text3); } .bt-rail b { display: block; margin-top: 8px; font-size: 46px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--acc); font-variant-numeric: tabular-nums; } .bt-rail small { display: block; margin-top: 9px; font-size: 12.5px; color: var(--text3); } @media (max-width: 1100px) { .bt { padding: 26px 22px 24px; } .bt h2 { font-size: 26px; } .bt-rail { position: static; text-align: left; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } .bt-rail b { font-size: 34px; } } /* 돈이 걸린 것 카드. 먹색 판에는 합계만, 내역은 여기. */ #capCard .cap-row:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } #capCard .cap-row { border-top-color: var(--line-2); } /* 남은 일 목록의 제 머리말은 카드 제목과 겹치므로 건수만 남긴다. */ .bf-rest .h { font-size: 12.5px; font-weight: 700; letter-spacing: .055em; color: var(--text3); } /* 세 칸 안에서는 머리말이 425px 다. 알약을 조인다. */ .hcol .doc-tabs { gap: 5px; } .hcol .doc-tabs button { height: 29px; padding: 0 11px; font-size: 12.5px; } .hcol .card-head { gap: 8px; } /* ---------- 결재함 ---------- 다섯 장을 세로로 쌓으면 증명서 한 건을 보려고 앞 네 장을 지나쳐야 한다. 갈래를 왼쪽에 세우고 고른 것 하나만 띄운다. 건수가 갈래 옆에 붙는다. */ .inbox { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: var(--s5); align-items: start; } .ibmain { min-width: 0; } .ibrail { background: var(--paper); border: 1px solid rgba(var(--sh-rgb),.055); border-radius: 14px; box-shadow: 0 1px 1px rgba(var(--sh-rgb),.03), 0 5px 12px -7px rgba(var(--sh-rgb),.13); padding: 8px 10px 12px; position: sticky; top: var(--s4); } .ibrail h6 { font-size: 11.5px; font-weight: 700; letter-spacing: .055em; color: var(--text3); padding: 14px 10px 6px; } .ibrail .ib { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: none; font: 600 13.5px/1.4 inherit; letter-spacing: -.02em; color: var(--text2); cursor: pointer; text-align: left; } .ibrail .ib:hover { background: var(--hover); color: var(--ink); } .ibrail .ib em { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--text4); } .ibrail .ib i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--line); } /* 점은 '기다리는 게 있다' 는 뜻이다. 0건이면 색이 없어야 한다. */ .ibrail .ib.has i { background: var(--danger); } .ibrail .ib.on { background: var(--acc-soft); color: var(--acc); } .ibrail .ib.on i { background: var(--acc); } .ibrail .ib.on em { color: var(--acc); } .ibhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--s4); flex-wrap: wrap; } .ibhead h2 { font-size: 23px; font-weight: 800; letter-spacing: -.035em; } .ibhead span { font-size: 13.5px; color: var(--text3); } /* 갈래가 이름표 노릇을 하므로 장마다 붙은 머리말은 뺀다. */ .ibmain .card-head { display: none; } /* 고르는 칸 */ .ibc { width: 42px; padding-right: 0 !important; } .ibck { width: 17px; height: 17px; padding: 0; border: 1.5px solid var(--text4); border-radius: 4px; background: var(--paper); cursor: pointer; position: relative; vertical-align: -3px; } .ibck:hover { border-color: var(--acc); } .ibck.on { background: var(--acc); border-color: var(--acc); } .ibck.on::after { content: ''; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); } tbody tr.sel td { background: var(--acc-soft); } /* 잔여 연차. 적으면 결재하기 전에 보여야 한다. */ .bal { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--line-2); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .bal.low { background: var(--warn-bg, var(--warn-bg)); color: var(--warn); } /* 한꺼번에 처리하는 띠 */ .ibbulk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--s4); padding: 14px 18px; background: var(--acc-soft); border: 1px solid var(--acc-line); border-radius: 12px; } .ibbulk b { font-size: 13.5px; font-weight: 700; color: var(--acc-2); } .ibbulk span { font-size: 13px; color: var(--text2); } .ibbulk .sp { margin-left: auto; display: flex; gap: 7px; } .ibbulk .btn { height: 36px; } @media (max-width: 900px) { .inbox { grid-template-columns: minmax(0, 1fr); } .ibrail { position: static; } .ibrail .ib { display: inline-flex; width: auto; } } /* ---------- 일정·공지·업무 ---------- 세 장이 세로로 쌓여 있어서 달력을 보려면 공지를 지나쳐야 했다. 달력을 본문으로 올리고 공지와 업무는 오른쪽에 목록으로 세운다. 쓰는 자리는 가운데 넓은 쪽에 둔다. 320px 칸에서는 날짜 두 개가 가로로 안 들어간다. */ .bdwrap { display: grid; grid-template-columns: 206px minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; } .bdmain, .bdright { min-width: 0; } .bdrail { position: sticky; top: var(--s4); background: var(--paper); border: 1px solid rgba(var(--sh-rgb),.055); border-radius: 14px; box-shadow: 0 1px 1px rgba(var(--sh-rgb),.03), 0 5px 12px -7px rgba(var(--sh-rgb),.13); padding: var(--s4); } .bdrail .bd-new { width: 100%; margin-bottom: var(--s2); } .bdrail h6 { font-size: 11.5px; font-weight: 700; letter-spacing: .055em; color: var(--text3); margin: var(--s5) 0 var(--s2); } .bd-sum { font-size: 13px; line-height: 1.8; color: var(--text2); } /* 작은 달력 */ .bdmini { margin-top: var(--s4); } .bdmini .mh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .bdmini .mh b { font-size: 13.5px; font-weight: 700; } .bdmini .mh button { width: 24px; height: 24px; border: 0; border-radius: 5px; background: none; font-size: 15px; color: var(--text4); cursor: pointer; } .bdmini .mh button:hover { background: var(--hover); color: var(--ink); } .bdmini table { width: 100%; border-collapse: collapse; } .bdmini th { padding: 0 0 5px; font-size: 11px; font-weight: 600; color: var(--text4); background: none; border: 0; letter-spacing: 0; text-align: center; } .bdmini td { padding: 3px 0; text-align: center; font-size: 12px; border: 0; font-variant-numeric: tabular-nums; } .bdmini td.s { color: var(--danger); } .bdmini td.t { background: var(--acc); color: #fff; border-radius: 5px; font-weight: 700; } /* 거르개. 켜진 것만 색 점이 붙는다. */ .evf { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: none; font: 500 13px/1.4 inherit; letter-spacing: -.02em; color: var(--text3); cursor: pointer; text-align: left; } .evf:hover { background: var(--hover); } .evf i { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--text4); flex: none; position: relative; } .evf.on { color: var(--ink); font-weight: 600; } .evf.on i { background: var(--acc); border-color: var(--acc); } .evf.on i::after { content: ''; position: absolute; left: 3.5px; top: .5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); } /* 끈 종류는 달력에서 숨는다. 다시 그리지 않는다. */ #calBody.no-leave .ev.leave, #calBody.no-field .ev.field, #calBody.no-overtime .ev.overtime, #calBody.no-training .ev.training, #calBody.no-task .ev.task, #calBody.no-holiday .ev.holiday, #calBody.no-holiday .ev.off { display: none; } /* 오른쪽 목록 */ .bdright { background: var(--paper); border: 1px solid rgba(var(--sh-rgb),.055); border-radius: 14px; box-shadow: 0 1px 1px rgba(var(--sh-rgb),.03), 0 5px 12px -7px rgba(var(--sh-rgb),.13); padding: var(--s4) var(--s5) var(--s5); position: sticky; top: var(--s4); } .bdright section + section { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line-2); } .bd-h { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); } .bd-h h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -.025em; } .bd-h .btn { margin-left: auto; } /* 좁은 칸이라 공지와 업무 줄을 세로로 눕힌다. */ .bdright .nt, .bdright .tk { display: block; padding: 12px 0; border-bottom: 1px solid var(--line-2); } .bdright .nt:last-child, .bdright .tk:last-child { border-bottom: 0; } .bdright .nt > div + div, .bdright .tk > div + div { margin-top: 7px; } .bdright .nt .sub, .bdright .tk .sub { font-size: 12.5px; } @media (max-width: 1340px) { .bdwrap { grid-template-columns: 206px minmax(0, 1fr); } .bdright { grid-column: 1 / -1; position: static; } .bdright section + section { margin-top: var(--s5); } } @media (max-width: 900px) { .bdwrap { grid-template-columns: minmax(0, 1fr); } .bdrail { position: static; } } /* 일정 화면의 큰 달력. 첫 화면 달력과 .cal 이름을 같이 쓰는데 그쪽은 안쪽에서 7칸을 나누고 이쪽은 바깥이 7칸이어야 한다. 되살린다. */ .cal-m { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .cal-m .dy { min-height: 104px; } .cal-m .ev { display: block; margin-top: 3px; padding: 2px 6px; border-radius: 4px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- 들어가는 자리 ---------- 하이웍스 로그인은 가운데 폼 하나뿐이다. 매일 쓰는 사람이 들어오는 자리라 그렇다. 우리는 설치하고 처음 들어오는 사람이 많아서 왼쪽에 '여기가 어디인지' 를 둔다. 좁은 화면에서는 왼쪽 판을 접는다. 휴대폰에서 소개를 지나 폼까지 내려가게 하면 안 된다. */ .gate { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .gate-l { background: var(--ink); color: #fff; padding: 56px 52px; position: relative; overflow: hidden; display: flex; flex-direction: column; } /* 두 겹 동그라미는 도장 테두리다. 이름에서 나온 표식이라 빌려온 게 아니다. */ .gate-l::after { content: ''; position: absolute; left: -120px; bottom: -148px; width: 460px; height: 460px; border: 1.5px solid rgba(255,255,255,.07); border-radius: 50%; } .gate-l::before { content: ''; position: absolute; left: -62px; bottom: -86px; width: 336px; height: 336px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; } .gate-l > * { position: relative; } .gate-bi { display: flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 800; letter-spacing: -.03em; } /* 모바일 앱 아이콘과 같은 도장 표식. 실제로 찍은 것처럼 살짝 기울여 둔다. */ .gate-bi i { width:35px; height:35px; flex:none; position:relative; border:2.2px solid currentColor; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:800; letter-spacing:-.07em; color:var(--danger); transform:rotate(-11deg); } .gate-l h2 { margin: auto 0 0; font-size: 34px; font-weight: 800; letter-spacing: -.042em; line-height: 1.34; } .gate-l p { margin-top: 17px; font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.62); max-width: 26em; } .gate-l ul { margin-top: 32px; list-style: none; display: grid; gap: 11px; padding: 0; } .gate-l li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: rgba(255,255,255,.78); } .gate-l li svg { width: 17px; height: 17px; flex: none; stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .55; } .gate-r { display: grid; place-items: center; padding: 40px 24px; background: #fff; } .gate-box { width: 100%; max-width: 372px; } .gate-cross { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--text3); } .gate-cross a { color: var(--acc); font-weight: 600; text-decoration: none; } .gate-cross a:hover { text-decoration: underline; } .gate-ft { margin-top: 14px; font-size: 12.5px; line-height: 1.8; color: var(--text3); } @media (max-width: 860px) { .gate { grid-template-columns: 1fr; } /* 휴대폰에서 소개를 지나 폼까지 내려가게 하면 안 된다. 왼쪽 판은 접는다. */ .gate-l { display: none; } .gate-r { padding: 32px 20px; align-items: start; } } .gate-r h1 { font-size: 27px; font-weight: 800; letter-spacing: -.035em; color: var(--ink); } .gate-sub { margin-top: 7px; font-size: 14.5px; color: var(--text3); } .gate-f { display: block; margin-top: 26px; } .gate-f span { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 700; color: var(--text2); } .gate-f input { width: 100%; height: 48px; border-radius: 7px; } .gate-go { width: 100%; height: 50px; margin-top: 16px; font-size: 15.5px; } /* ============================================================ 법제처에서 받은 개정 v2·v3 에만 있던 탓에 v1 에서는 글자만 쌓여 보였다. 바탕으로 내려 둔다. 출처 표기(.la-src)는 저작권법 제137조·제138조 때문에 반드시 보여야 한다. 지우지 말 것. ============================================================ */ .lawapi { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-2); } .la-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); } .la-head b { font-size: 13px; font-weight: 800; letter-spacing: .01em; color: var(--text3); } .la { border-top: 1px solid var(--line-2); } .la:first-of-type { border-top: 0; } .la-top { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; cursor: pointer; } .la-top:hover { background: var(--hover); } .la-top .d { font-size: 12.5px; font-weight: 700; color: var(--text2); font-variant-numeric: tabular-nums; } .la-top .d small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--text4); } .la-top b { font-size: 14px; font-weight: 700; letter-spacing: -.02em; } .la-top .sub { margin-top: 3px; font-size: 12.5px; color: var(--text3); } .la-none { padding: 18px 0; font-size: 13.5px; color: var(--text3); } .la-err { margin-top: var(--s3); padding: 11px 13px; border-radius: var(--r-sm); background: var(--danger-bg); color: var(--danger); font-size: 13px; line-height: 1.55; } .la-src { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--text4); } .la-diff { padding: 4px 0 16px; } .la-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .la-sum span { height: 22px; padding: 0 9px; border-radius: var(--r-sm); display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; } .la-sum .c { background: var(--acc-soft); color: var(--acc-ink); } .la-sum .a { background: var(--ok-bg); color: var(--okc); } .la-sum .r { background: var(--danger-bg); color: var(--danger); } .la-note { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--text3); } .la-jo { margin-bottom: 12px; border-left: 3px solid var(--line); padding-left: 12px; } .la-jo.c { border-left-color: var(--acc); } .la-jo.a { border-left-color: var(--okc); } .la-jo.r { border-left-color: var(--danger); } .la-jo-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .la-jo-h b { font-size: 13px; font-weight: 800; } .la-jo-h span { font-size: 11.5px; font-weight: 700; color: var(--text4); } .la-old, .la-new { margin-top: 5px; } .la-old > span, .la-new > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--text4); } .la-old p, .la-new p { margin: 3px 0 0; font-size: 13px; line-height: 1.68; } .la-old p { color: var(--text3); text-decoration: line-through; text-decoration-color: var(--text4); } .la-new p { color: var(--ink-2, var(--ink)); } .la-diff mark { background: var(--acc-soft); color: var(--acc-ink); padding: 0 2px; border-radius: 2px; box-shadow: inset 0 -2px 0 var(--acc-line); } .la-old p mark { background: none; color: inherit; box-shadow: none; } /* 시행 상태 알약. .lw 안에만 있던 규칙이라 이 카드에서는 맨 글자로 나왔다. */ .la-top .st { display: inline-flex; align-items: center; white-space: nowrap; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .la-top .st.done { background: var(--ok-bg); color: var(--okc); } .la-top .st.soon { background: var(--warn-bg); color: var(--warn); } /* 띠에서 '등록하기' 를 눌러 데려온 카드. 어디로 왔는지 보이게 잠깐 칠한다. */ .card.flash { animation: cardFlash 2.2s var(--ease); } @keyframes cardFlash { 0% { box-shadow: 0 0 0 3px var(--warn); } 18% { box-shadow: 0 0 0 3px var(--warn); } 100% { box-shadow: 0 0 0 3px rgba(0,0,0,0); } } @media (prefers-reduced-motion: reduce) { .card.flash { animation: none; outline: 2px solid var(--warn); } } /* 설정 화면 아래에 붙어 따라다니는 저장 띠. 칸이 열다섯 개인데 저장 단추가 한가운데 하나뿐이라 못 찾고 나가는 일이 있었다. */ .savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 24px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(var(--sh-rgb), .07); } .savebar #saveBarMsg { font-size: 13px; color: var(--text3); } .savebar.dirty { background: var(--warn-bg); border-top-color: var(--warn-line); } .savebar.dirty #saveBarMsg { color: var(--warn); font-weight: 700; } @media (min-width: 981px) { .savebar { left: var(--side-w, 236px); } } /* 급여대장 입력칸. 숫자는 오른쪽으로 모아야 자릿수가 세로로 맞는다. 가운데로 두면 2,300,000 과 109,250 의 자릿수가 어긋나 읽기 어렵다. */ #payBody input[data-k] { text-align: right; font-variant-numeric: tabular-nums; } #payBody td.r, #payBody td.calc, #payBody td.num { text-align: right; }