/* ================================================================ 파일: static/ui/mob/pc_mob_common.css 역할: 모바일 화면 공통 디자인 시스템 (단일 소스) - 디자인 토큰(:root) / 헤더 / 인사말 / 버튼 표준세트 / 입력폼 / 카드그리드 / 모달 / 아이콘 / compact 모드 사용: 모바일 화면 에 네임스페이스: 컴포넌트 .mc-*, 버튼 .mbtn-* (기존 클래스와 충돌 방지) 작성: 2026-06-01 ================================================================ */ /* */ :root { /* 배경/면 */ --mc-bg: #F1F5F9; --mc-panel: #FFFFFF; --mc-input-bg: #F8FAFC; /* 경계선 */ --mc-border: #CBD5E1; --mc-border-soft: #E2E8F0; /* 글자 */ --mc-text: #1E293B; --mc-text-soft: #64748B; --mc-text-caption:#94A3B8; --mc-on-dark: #F1F5F9; /* 슬레이트(헤더) */ --mc-slate: #0F172A; --mc-slate-2: #1E293B; /* 액센트 — 오렌지 */ --mc-accent: #F59E0B; --mc-accent-d: #D97706; /* 의미색 */ --mc-blue: #3B82F6; --mc-blue-d: #2563EB; --mc-green: #10B981; --mc-green-d: #059669; --mc-red: #EF4444; --mc-red-d: #DC2626; --mc-indigo: #6366F1; --mc-purple: #8B5CF6; --mc-cyan: #0EA5E9; /* 행 */ --mc-row-hover: #EFF6FF; --mc-row-active: #FEF3C7; /* 반경 */ --mc-r-sm: 6px; --mc-r: 8px; --mc-r-lg: 14px; /* 폰트 크기 (기본=버튼형 큰 글씨) */ --mc-fs: 16px; --mc-fs-title: 20px; --mc-fs-btn: 16px; --mc-fs-label: 14px; /* 폰트 스택 */ --mc-font: 'Pretendard Variable', 'Pretendard', -apple-system, system-ui, 'Apple SD Gothic Neo', sans-serif; } /* */ /* */ .mc-header, .m-header, .hdr { flex: 0 0 auto; background: linear-gradient(180deg, var(--mc-slate-2) 0%, var(--mc-slate) 100%); color: #FFF; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); } .mc-header .mc-badge, .mc-badge { background: var(--mc-accent); color: #FFF; padding: 4px 10px; border-radius: var(--mc-r-sm); font-size: 14px; font-weight: 700; white-space: nowrap; } .mc-header .mc-title, .mc-title { font-size: var(--mc-fs-title); font-weight: 800; letter-spacing: -0.3px; } .mc-header .mc-spacer, .mc-spacer { flex: 1; } .mc-header .mc-user, .mc-user { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #CBD5E1; font-weight: 600; white-space: nowrap; } .mc-user svg { width: 18px; height: 18px; } /* */ /* */ .mc-greet { flex: 0 0 auto; padding: 18px 20px 8px 20px; background: var(--mc-panel); border-bottom: 1px solid var(--mc-border); } .mc-greet .hi { font-size: 22px; font-weight: 800; } .mc-greet .hi .name { color: var(--mc-accent-d); } .mc-greet .sub { margin-top: 4px; font-size: 15px; color: var(--mc-text-soft); } .mc-main { flex: 1 1 auto; overflow-y: auto; padding: 16px; } .mc-footer { flex: 0 0 auto; padding: 10px 16px 14px 16px; background: var(--mc-panel); border-top: 1px solid var(--mc-border); text-align: center; font-size: 13px; color: var(--mc-text-soft); } /* */ /* */ /* 기본 */ .mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; border: 1px solid transparent; border-radius: var(--mc-r); font-family: var(--mc-font); font-size: var(--mc-fs-btn); font-weight: 800; line-height: 1.2; cursor: pointer; user-select: none; transition: transform 0.08s ease, filter 0.15s ease, background 0.15s ease; -webkit-tap-highlight-color: transparent; } .mbtn:active { transform: scale(0.97); } .mbtn:disabled { opacity: 0.5; cursor: default; transform: none; } .mbtn svg { width: 18px; height: 18px; stroke: currentColor; } /* 변형 — 의미별 색 */ .mbtn-save { background: var(--mc-green); color: #FFF; } /* 저장 */ .mbtn-save:active { background: var(--mc-green-d); } .mbtn-add { background: var(--mc-accent); color: #FFF; } /* 등록/추가 */ .mbtn-add:active { background: var(--mc-accent-d); } .mbtn-search, /* 검색 */ .mbtn-query { background: var(--mc-blue); color: #FFF; } /* 조회 */ .mbtn-search:active, .mbtn-query:active { background: var(--mc-blue-d); } .mbtn-confirm { background: var(--mc-slate); color: #FFF; } /* 확정/확인 */ .mbtn-confirm:active { filter: brightness(1.4); } .mbtn-danger { background: var(--mc-red); color: #FFF; } /* 삭제 */ .mbtn-danger:active { background: var(--mc-red-d); } /* 아웃라인 / 보조 */ .mbtn-ghost, .mbtn-cancel { background: var(--mc-panel); color: var(--mc-text); border-color: var(--mc-border); } .mbtn-ghost:active, .mbtn-cancel:active { background: #F1F5F9; } .mbtn-back { background: transparent; color: #FFF; border-color: rgba(255,255,255,0.4); padding: 8px 12px; font-weight: 700; } .mbtn-back:active { background: rgba(255,255,255,0.12); } .mbtn-reload { background: var(--mc-panel); color: var(--mc-text-soft); border-color: var(--mc-border); } /* 크기 */ .mbtn-block { width: 100%; } .mbtn-lg { padding: 16px 20px; font-size: 17px; } .mbtn-sm { padding: 6px 10px; font-size: 12px; gap: 4px; } .mbtn-sm svg { width: 14px; height: 14px; } /* FAB (떠있는 추가 버튼) */ .mfab { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: var(--mc-accent); color: #FFF; border: none; font-size: 28px; font-weight: 700; line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 800; } .mfab:active { background: var(--mc-accent-d); transform: scale(0.95); } /* */ /* */ .mc-field { margin-bottom: 14px; } .mc-label { display: block; margin-bottom: 6px; font-size: var(--mc-fs-label); font-weight: 700; color: var(--mc-text-soft); } .mc-input, .mc-select, .mc-textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--mc-border); border-radius: var(--mc-r); font-family: var(--mc-font); font-size: 15px; font-weight: 600; background: var(--mc-input-bg); color: var(--mc-text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; } .mc-input:focus, .mc-select:focus, .mc-textarea:focus { border-color: var(--mc-accent); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); } /* */ /* */ .mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mc-card { background: var(--mc-panel); border: 2px solid var(--mc-border); border-radius: var(--mc-r-lg); padding: 22px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 120px; cursor: pointer; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .mc-card:active { transform: scale(0.97); border-color: var(--mc-accent); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); } .mc-card .ico { line-height: 0; color: var(--mc-text-soft); } .mc-card .ico svg { width: 44px; height: 44px; stroke-width: 1.7; stroke: currentColor; fill: none; } .mc-card .name { font-size: 19px; font-weight: 800; color: var(--mc-text); text-align: center; } /* */ /* */ .mc-modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,0.55); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 9999; } .mc-modal-bg.show { display: flex; } .mc-modal { background: var(--mc-panel); border-radius: 16px; width: 100%; max-width: 460px; max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.35); } .mc-modal .head { background: linear-gradient(180deg, var(--mc-slate-2) 0%, var(--mc-slate) 100%); color: #FFF; padding: 16px 18px; display: flex; align-items: center; gap: 10px; } .mc-modal .head .ttl { font-size: 20px; font-weight: 800; flex: 1; } .mc-modal .body { padding: 18px 20px; overflow-y: auto; font-size: 16px; line-height: 1.6; flex: 1 1 auto; } .mc-modal .foot { padding: 12px 18px 16px; border-top: 1px solid var(--mc-border); display: flex; gap: 10px; } /* */ /* */ .mc-ico { display: inline-flex; line-height: 0; } .mc-ico svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* */ /* */ /* body 에 class="mc-compact" 부여 시 폰트/패딩 축소 */ body.mc-compact { --mc-fs: 12px; --mc-fs-title: 16px; --mc-fs-btn: 12px; --mc-fs-label: 12px; } body.mc-compact .mc-header, body.mc-compact .m-header, body.mc-compact .hdr { padding: 8px 12px; gap: 8px; } body.mc-compact .mbtn { padding: 7px 10px; } body.mc-compact .mbtn-lg { padding: 10px 14px; font-size: 13px; } body.mc-compact .mc-input, body.mc-compact .mc-select { padding: 8px 10px; font-size: 13px; } /* */ /* */ /* flex 컬럼 레이아웃에선 맨 아래 자식으로 넣으면 자동 하단 고정. 비-flex 페이지는 .mc-tabbar.is-fixed 로 화면 하단 고정. */ .mc-tabbar { flex: 0 0 auto; display: flex; align-items: stretch; background: var(--mc-panel); border-top: 1px solid var(--mc-border); box-shadow: 0 -2px 6px rgba(0,0,0,0.04); padding-bottom: env(safe-area-inset-bottom, 0); /* 아이폰 하단 여백 */ } .mc-tabbar.is-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 700; } .mc-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; background: none; border: none; cursor: pointer; color: var(--mc-text-soft); font-family: var(--mc-font); font-size: 12px; font-weight: 700; -webkit-tap-highlight-color: transparent; } .mc-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mc-tab:active { background: #F1F5F9; } .mc-tab.is-active { color: var(--mc-accent-d); } /* 현재 화면 강조 */ .mc-tab:disabled { opacity: 0.4; cursor: default; } /* */ /* */ /* 각 화면이 :root 에 재선언하던 --c-* 변수를 공통 토큰의 별칭으로 제공. 화면 인라인 CSS 의 :root 블록은 제거하고 이 별칭을 그대로 사용. */ :root { --c-bg: var(--mc-bg); --c-panel: var(--mc-panel); --c-input-bg: var(--mc-input-bg); --c-border: var(--mc-border); --c-border-soft: var(--mc-border-soft); --c-text: var(--mc-text); --c-text-soft: var(--mc-text-soft); --c-accent: var(--mc-accent); --c-accent-d: var(--mc-accent-d); --c-blue: var(--mc-blue); --c-green: var(--mc-green); --c-red: var(--mc-red); --c-slate: var(--mc-slate); --c-slate-2: var(--mc-slate-2); } /* 페이지 베이스 — body 에 class="mc-page" 부여 시 모바일 표준 레이아웃 (전체높이 flex 컬럼 + 내부 스크롤). 각 화면의 html,body 기본 CSS 대체 */ body.mc-page { margin: 0; padding: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; font-family: var(--mc-font); background: var(--mc-bg); color: var(--mc-text); font-size: 17px; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body.mc-page *, body.mc-page *::before, body.mc-page *::after { box-sizing: border-box; } /* */ /* */ /* 화면들이 .m-header 안에서 쓰던 무접두사 자식 클래스 표준화 */ .mc-header .badge, .m-header .badge, .hdr .badge { background: var(--mc-accent); color: #FFF; padding: 4px 10px; border-radius: var(--mc-r-sm); font-size: 14px; font-weight: 700; white-space: nowrap; } .mc-header .title, .m-header .title, .hdr .title { font-size: var(--mc-fs-title); font-weight: 800; letter-spacing: -0.3px; } .mc-header .spacer, .m-header .spacer, .hdr .spacer { flex: 1; } .mc-header .back, .m-header .back, .hdr .back { background: rgba(255,255,255,0.1); color: #FFF; padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid rgba(255,255,255,0.2); white-space: nowrap; } .mc-header .back:active, .m-header .back:active, .hdr .back:active { background: rgba(255,255,255,0.2); } /* */ /* */ .count-bar { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px 12px; background: var(--mc-slate); color: #FFF; font-weight: 700; align-items: center; overflow-x: auto; white-space: nowrap; } .count-bar .pill { padding: 4px 11px; border-radius: 20px; font-size: 13px; flex: 0 0 auto; } .count-bar .pill b { font-size: 15px; } .count-bar .pill.total { background: rgba(255,255,255,0.14); color: #E2E8F0; } .count-bar .pill.ok { background: rgba(16,185,129,0.25); color: #34D399; } .count-bar .pill.wait { background: rgba(245,158,11,0.28); color: #FBBF24; } .count-bar .pill.date { background: rgba(255,255,255,0.10); color: #CBD5E1; } .count-bar .spacer { flex: 1 0 auto; } .count-bar .date-input { flex: 0 0 auto; background: rgba(255,255,255,0.14); color: #FFF; border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; padding: 4px 8px; font-size: 13px; font-weight: 700; font-family: inherit; } .count-bar .date-input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.8; } /* */ /* */ .scan-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #064E3B; } .scan-bar .led { width: 11px; height: 11px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px #34D399; flex: 0 0 auto; animation: mcLedBlink 1.6s infinite; } @keyframes mcLedBlink { 0%,100%{opacity:1;} 50%{opacity:0.35;} } .scan-bar .lab { color: #A7F3D0; font-size: 14px; font-weight: 800; flex: 0 0 auto; } .scan-bar input { flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; color: #ECFDF5; font-size: 14px; font-weight: 700; font-family: inherit; padding: 6px 10px; outline: none; caret-color: #34D399; } .scan-bar input::placeholder { color: #6EE7B7; opacity: 0.7; } .scan-bar.paused { background: #7F1D1D; } .scan-bar.paused .led { background: #F87171; box-shadow: 0 0 8px #F87171; animation: none; } .scan-bar.paused .lab { color: #FECACA; } /* */ /* */ .list-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 10px 90px; } .list-empty { text-align: center; color: var(--mc-text-soft); padding: 46px 0; font-weight: 700; } /* 검수형 행 (.lrow — 미검수/검수 상태) */ .lrow { background: var(--mc-panel); border: 1px solid var(--mc-border); border-radius: 10px; padding: 10px 13px; margin-bottom: 7px; } .lrow .l1 { font-size: 15px; font-weight: 800; margin-bottom: 3px; display: flex; align-items: center; gap: 7px; } .lrow .l1 .fno { color: #B45309; } .lrow .l1 .st { margin-left: auto; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 12px; flex: 0 0 auto; } .lrow .l2 { font-size: 13px; color: var(--mc-text-soft); line-height: 1.45; word-break: break-all; } .lrow.pend .st { background: #FEF3C7; color: #B45309; } .lrow.done { background: #ECFDF5; border-color: #A7F3D0; } .lrow.done .st { background: #D1FAE5; color: #047857; } .lrow.done .l1, .lrow.done .l2 { opacity: 0.78; } /* 게시판형 행 (.prow — 제목/메타) */ .prow { background: var(--mc-panel); border: 1px solid var(--mc-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; } .prow:active { background: var(--mc-row-hover); } .prow .p1 { font-size: 16px; font-weight: 800; margin-bottom: 4px; word-break: break-all; } .prow .p1 .clip { color: var(--mc-blue); font-size: 14px; } .prow .p2 { font-size: 13px; color: var(--mc-text-soft); display: flex; gap: 10px; } .prow .p2 .no { color: #94A3B8; } /* */ /* */ .ovl { position: fixed; inset: 0; background: var(--mc-slate); color: #FFF; display: none; flex-direction: column; z-index: 80; } .ovl.show { display: flex; } .ovl .o-head { flex: 0 0 auto; padding: 14px 16px; font-size: 18px; font-weight: 800; background: var(--mc-slate-2); display: flex; align-items: center; gap: 10px; } .ovl .o-head .spacer { flex: 1; } .ovl .o-head .x { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #FFF; padding: 5px 13px; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; } .ovl .o-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; } .ovl .o-foot { flex: 0 0 auto; padding: 12px 14px; background: var(--mc-slate-2); display: flex; gap: 8px; } .ovl .o-foot button { flex: 1; padding: 14px; border: none; border-radius: 11px; font-size: 17px; font-weight: 900; cursor: pointer; font-family: inherit; } /* */ /* */ /* 하단 토스트 — 성공(ok)/경고(dup) */ .scan-toast { position: absolute; left: 12px; right: 12px; bottom: 14px; padding: 14px 16px; border-radius: 12px; font-size: 16px; font-weight: 700; color: #FFF; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: none; line-height: 1.4; z-index: 50; } .scan-toast.show { display: block; } .scan-toast.ok { background: rgba(16,185,129,0.95); } .scan-toast.dup { background: rgba(245,158,11,0.95); } .scan-toast .sub { font-size: 13px; font-weight: 600; opacity: 0.92; margin-top: 2px; word-break: break-all; } /* 오류 전체화면 — 없는 라벨/형식 오류 */ .err-screen { position: absolute; inset: 0; background: #7F1D1D; color: #FFF; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 28px 22px; text-align: center; z-index: 80; } .err-screen.show { display: flex; } .err-screen .big { font-size: 30px; font-weight: 900; margin-bottom: 6px; } .err-screen .ico { font-size: 64px; line-height: 1; margin-bottom: 10px; } .err-screen .msg { font-size: 18px; font-weight: 700; margin-bottom: 18px; } .err-screen .detail { width: 100%; max-width: 420px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.25); border-radius: 12px; padding: 14px 16px; text-align: left; font-size: 14px; line-height: 1.7; margin-bottom: 24px; word-break: break-all; } .err-screen .detail b { color: #FCA5A5; } .err-screen .ok-btn { width: 100%; max-width: 420px; padding: 16px; background: #FFF; color: #7F1D1D; border: none; border-radius: 12px; font-size: 20px; font-weight: 900; cursor: pointer; } .err-screen .ok-btn:active { background: #FEE2E2; } /* 시작 오버레이 — 첫 터치(오디오 활성화/안내) */ .start-screen { position: fixed; inset: 0; background: var(--mc-slate); color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 95; padding: 24px; } .start-screen .ico { font-size: 58px; line-height: 1; } .start-screen .t { font-size: 21px; font-weight: 900; } .start-screen .sub { font-size: 14px; color: #94A3B8; text-align: center; line-height: 1.6; } .start-screen button { margin-top: 8px; padding: 18px 50px; font-size: 22px; font-weight: 900; border: none; border-radius: 14px; background: var(--mc-green); color: #FFF; cursor: pointer; } .start-screen button:active { background: var(--mc-green-d); } /* */ /* [MOD-17 추가] 오류 토스트 (확인 버튼 없이 자동 재스캔용) */ .scan-toast.bad { background: rgba(239,68,68,0.95); }