/* 공통 화면 스타일 — 무채색, 군더더기 없이 원칙 1) 색은 회색 계열만. 강조는 '진하기'로만 준다 2) 빨강은 오직 '놓치면 사고 나는 것'에만 (누락·저장실패). 그래야 눈에 띈다 3) 이모티콘 안 씀 4) 테두리·여백으로 구분하고, 배경색으로 칠하지 않는다 */ :root { --바탕: #f6f6f7; --판: #ffffff; --선: #e3e3e6; --선진한: #c9c9ce; --글: #1c1c1e; --글연한: #6e6e73; --글흐린: #9a9aa0; --강조: #1c1c1e; --경고: #b3261e; --주의: #8a6d1f; } * { box-sizing: border-box; } body { font-family: -apple-system, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; margin: 0; padding: 20px 16px 72px; background: var(--바탕); color: var(--글); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .폭 { max-width: 880px; margin: 0 auto; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } h2 { font-size: 20px; margin-bottom: 6px; } h3 { font-size: 15px; margin: 20px 0 8px; } .설명 { font-size: 13px; color: var(--글연한); margin-bottom: 18px; } .설명 b { color: var(--글); font-weight: 600; } /* 화면 이동 */ .이동 { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; } .이동 a { font-size: 13px; padding: 7px 12px; border-radius: 7px; color: var(--글연한); text-decoration: none; border: 1px solid transparent; } .이동 a:hover { background: #ececee; } .이동 a.현재 { background: var(--판); border-color: var(--선); color: var(--글); font-weight: 600; } /* 배너 두 줄 나누기 — 윗줄(작업 흐름) / 아랫줄(설정·관리). 폭이 좁으면 각 줄이 알아서 더 접힘 */ .이동 .끊기 { flex-basis: 100%; height: 0; margin: 0; padding: 0; border: 0; } /* 사장 전용 메뉴: 로그인 확인 전까지 아예 숨김 → 직원 화면에서 깜빡임 없음. sync.js가 역할을 로 달면, 사장·비로그인일 때만 보인다. */ [data-owner] { display: none; } :root[data-role="owner"] [data-owner], :root[data-role="none"] [data-owner] { display: inline-block; } /* 버튼 */ button { font-family: inherit; font-size: 13px; padding: 8px 14px; border: 1px solid var(--선진한); border-radius: 7px; background: var(--판); color: var(--글); cursor: pointer; } button:hover { background: #f0f0f2; } button.주 { background: var(--강조); border-color: var(--강조); color: #fff; } button.주:hover { background: #000; } button.작 { padding: 5px 9px; font-size: 12px; } button.위험 { color: var(--경고); border-color: #e3c4c2; } /* 고르기 줄 (본인/전체 같은 전환) */ .고르기 { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .고르기 button { border-radius: 7px; } .고르기 button.켬 { background: var(--강조); border-color: var(--강조); color: #fff; } input, select, textarea { font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--선진한); border-radius: 7px; background: var(--판); color: var(--글); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--글연한); } /* 판 (카드) */ .판 { background: var(--판); border: 1px solid var(--선); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; } .판.주의 { border-left: 3px solid var(--주의); } .판.경고 { border-left: 3px solid var(--경고); } .판.내것 { border-left: 3px solid var(--글); } /* 묶음 머리 */ .묶음 { margin-bottom: 22px; } .묶음머리 { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; color: var(--글); padding: 0 2px 7px; margin-bottom: 9px; border-bottom: 1px solid var(--선); } .묶음머리 .수 { font-size: 12px; font-weight: 400; color: var(--글흐린); } /* 줄 안의 작은 표시 — 배경 없이 글자와 테두리로만 */ .표 { font-size: 12px; color: var(--글연한); } .표.진 { color: var(--글); font-weight: 600; } .표.테 { border: 1px solid var(--선); border-radius: 5px; padding: 1px 6px; } .표.경고 { color: var(--경고); font-weight: 600; } .표.주의 { color: var(--주의); font-weight: 600; } .줄 { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } .줄 + .줄 { margin-top: 7px; } .라벨 { font-size: 12px; color: var(--글흐린); } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { border-bottom: 1px solid var(--선); padding: 8px 6px; text-align: left; } th { font-weight: 600; color: var(--글연한); font-size: 12px; } td input, td select { width: 100%; } .빔 { text-align: center; color: var(--글흐린); padding: 40px 12px; font-size: 13px; } .도움 { font-size: 12px; color: var(--글흐린); margin-top: 6px; } /* 📅 날짜 달력 (스케줄·링크전달 공용) */ .날짜줄 { margin-bottom: 12px; } .날짜단추 { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 9px 14px; border: 1px solid var(--선진한); border-radius: 22px; background: var(--판); } .날짜단추 .cnt { font-size: 12px; font-weight: 400; color: var(--글연한); } .달력 { border: 1px solid var(--선); border-radius: 12px; padding: 12px; margin-bottom: 14px; background: var(--판); max-width: 460px; } .달력머리 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .달력머리 .달 { font-weight: 700; font-size: 15px; flex: 1; text-align: center; } .달력머리 button { padding: 5px 11px; } .요일 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; } .요일 span { text-align: center; font-size: 11px; color: var(--글흐린); padding: 2px 0; } .날들 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .날 { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--선); border-radius: 8px; background: var(--판); color: var(--글); font-size: 13px; cursor: pointer; display: flex; align-items: flex-start; justify-content: flex-start; padding: 5px 6px; } .날.빈날 { border: 0; background: transparent; cursor: default; } .날.오늘날 { border-color: var(--글); font-weight: 700; } .날.고른날 { background: var(--강조); border-color: var(--강조); color: #fff; } .날 .수 { position: absolute; right: 4px; bottom: 4px; min-width: 17px; height: 17px; line-height: 17px; text-align: center; font-size: 10px; border-radius: 9px; background: var(--강조); color: #fff; padding: 0 4px; } .날.고른날 .수 { background: #fff; color: var(--강조); } .날.건없음 { color: var(--글흐린); } /* 알림 — 아래 가운데, 무채색. 실패만 빨강 */ .알림 { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 99; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; background: var(--글); color: #fff; display: none; max-width: 90vw; } .알림.실패 { background: var(--경고); } /* 넓은 표는 감싸서 가로 스크롤 (폰에서 레이아웃 안 깨지고, 표만 옆으로 밀림) */ .표감쌈 { overflow-x: auto; -webkit-overflow-scrolling: touch; } .표감쌈 table { min-width: 400px; } /* 📱 폰: 손가락으로 누르기 좋게 + iOS 입력 확대 방지 (컴퓨터는 위 기본값 그대로) */ @media (max-width: 520px) { body { padding: 14px 11px 76px; } h2 { font-size: 18px; } h3 { font-size: 14px; } .이동 { gap: 5px; } .이동 a { padding: 9px 12px; font-size: 13px; } button { padding: 10px 14px; } button.작 { padding: 7px 10px; } input, select, textarea { font-size: 16px; } /* 16px 미만이면 아이폰이 화면을 확대함 → 방지 */ th, td { padding: 8px 5px; } .판 { padding: 13px 13px; } }