/* 소방점검 시스템 — 자체 CSS (오프라인 보장 위해 CDN 미사용) 테마: 시맨틱 변수로 라이트/다크/베이직 3종. 로 전환. */ :root, [data-theme="light"] { color-scheme: light; /* 네이티브 위젯(달력·셀렉트·스크롤바)도 테마를 따르게 */ --bar: #1f2937; --bar-text: #fff; --accent: #4b5563; --accent-dark: #374151; /* 주동작 색(버튼·활성 칩·포커스) — 중립 바와 분리해 핵심 액션이 눈에 띄게. --primary-ink 는 '글자/테두리'용 강조색(어두운 테마에서 배경용 primary 와 분리해 가독성 유지) */ --primary: #2563eb; --primary-dark: #1d4ed8; --primary-soft: #eff6ff; --primary-ink: #2563eb; --bg: #f3f4f6; --surface: #fff; --surface-2: #f9fafb; --text: #111827; --muted: #6b7280; --muted2: #9ca3af; --border: #e5e7eb; --border-soft: #f3f4f6; --chip-bg: #f3f4f6; --chip-text: #374151; --green: #16a34a; --amber: #d97706; /* 상태색(시맨틱) — 경고/위험/정상/정보 배지·박스용. 테마별로 재정의해 다크에서도 톤 유지 */ --warn-bg: #fef3c7; --warn-border: #fde68a; --warn-text: #92400e; --danger: #dc2626; --danger-bg: #fee2e2; --danger-border: #fecaca; --danger-text: #b91c1c; --ok-bg: #dcfce7; --ok-border: #bbf7d0; --ok-text: #166534; --info-bg: #e0e7ff; --info-text: #3730a3; --blue-bg: #dbeafe; --blue-border: #bfdbfe; --blue-text: #1e40af; --mark-bg: #fde68a; --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.07); --shadow-md: 0 4px 12px rgba(16,24,40,.10); } [data-theme="dark"] { color-scheme: dark; --bar: #0b1220; --bar-text: #fff; --accent: #64748b; --accent-dark: #475569; /* 다크에선 채도·명도를 낮춘 차분한 파랑(쨍한 #3b82f6 은 눈에 거슬림). 글자용은 밝은 잉크색으로 분리 */ --primary: #3b5e96; --primary-dark: #324f80; --primary-soft: #1e293b; --primary-ink: #8fb0e0; --bg: #0f172a; --surface: #1e293b; --surface-2: #172033; --text: #e5e7eb; --muted: #94a3b8; --muted2: #64748b; --border: #334155; --border-soft: #26344a; --chip-bg: #334155; --chip-text: #e2e8f0; --green: #4ade80; --amber: #fbbf24; --warn-bg: #3b2f10; --warn-border: #713f12; --warn-text: #fcd34d; --danger: #f87171; --danger-bg: #3f1d1d; --danger-border: #7f1d1d; --danger-text: #fca5a5; --ok-bg: #14342b; --ok-border: #166534; --ok-text: #86efac; --info-bg: #312e81; --info-text: #c7d2fe; --blue-bg: #1e3a8a; --blue-border: #1e40af; --blue-text: #bfdbfe; --mark-bg: #92400e; --shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.35); --shadow-md: 0 6px 18px rgba(0,0,0,.45); } [data-theme="basic"] { /* 베이지(따뜻한 톤) */ color-scheme: light; --bar: #6b5d4f; --bar-text: #fff; --accent: #8a7355; --accent-dark: #6f5b40; /* 베이지 테마는 따뜻한 톤 유지 — 주동작도 갈색 계열 */ --primary: #9c7b4f; --primary-dark: #7c6038; --primary-soft: #efe7d6; --primary-ink: #7c6038; --bg: #f1e9da; --surface: #fbf7ef; --surface-2: #efe7d6; --text: #3b3526; --muted: #7c7059; --muted2: #a99e86; --border: #e3d8c2; --border-soft: #ece2cf; --chip-bg: #efe7d6; --chip-text: #5b4f3a; --green: #16a34a; --amber: #b45309; --shadow-sm: 0 1px 2px rgba(91,79,58,.06), 0 1px 3px rgba(91,79,58,.10); --shadow-md: 0 4px 14px rgba(91,79,58,.16); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif; background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; } [x-cloak] { display: none !important; } .app { max-width: 560px; margin: 0 auto; padding-bottom: calc(80px + env(safe-area-inset-bottom)); } header.appbar { position: sticky; top: 0; z-index: 10; background: var(--bar); color: var(--bar-text); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 4px rgba(0,0,0,.15); } header.appbar h1 { font-size: 1.05rem; margin: 0; font-weight: 700; } .appbar .left { display: flex; align-items: center; gap: 10px; } .content { padding: 16px; } /* 네트워크 상태 배지 */ .netbadge { font-size: .75rem; padding: 3px 8px; border-radius: 999px; font-weight: 600; } .netbadge.online { background: rgba(255,255,255,.22); } .netbadge.offline { background: rgba(0,0,0,.25); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); } .card h2 { font-size: .95rem; margin: 0 0 10px; } label { display: block; font-size: .8rem; color: var(--muted); margin: 10px 0 4px; font-weight: 600; } input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], textarea, select { width: 100%; padding: 12px; font-size: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; } textarea { min-height: 80px; resize: vertical; } /* 크롬 자동완성이 입력칸을 흰/연파랑으로 덧칠하는 것 무력화(다크에서 특히 거슬림). 배경은 box-shadow 로 덮고, 글자색은 -webkit-text-fill-color 로 지정해야 적용된다. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 600000s 0s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-soft); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 14px; font-size: 1rem; font-weight: 700; border: none; border-radius: 11px; cursor: pointer; transition: transform .06s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease; } .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--primary-dark); } .btn-primary:active { background: var(--primary-dark); transform: translateY(1px); } .btn-secondary { background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface-2); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; box-shadow: none; transform: none; cursor: default; } .btn:disabled:hover { background: var(--primary); } .btn-secondary:disabled:hover { background: var(--chip-bg); } .btn-row { display: flex; gap: 8px; } .btn-row .btn { width: auto; flex: 1; } /* 사진 촬영 버튼 */ .photo-input { display: none; } .photo-add { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--border); border-radius: 10px; padding: 18px; color: var(--muted); font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } .photo-add:hover { border-color: var(--primary-ink); color: var(--primary-ink); background: var(--surface-2); } .photo-add:active { background: var(--surface-2); } .thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .thumb { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb .rm { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 999px; width: 28px; height: 28px; font-size: 1rem; cursor: pointer; } /* 지적사항 목록 */ .item { border-left: 4px solid var(--amber); } .item.synced { border-left-color: var(--green); } .item .meta { font-size: .78rem; color: var(--muted); } .item .equip { font-weight: 700; } .status-pill { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .status-pill.pending { background: var(--warn-bg); color: var(--warn-text); } .status-pill.synced { background: var(--ok-bg); color: var(--ok-text); } .muted { color: var(--muted2); font-size: .85rem; } .section-title { font-size: .8rem; font-weight: 700; color: var(--muted); margin: 18px 0 8px; } /* 건물 필터 칩 */ .chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 8px 13px; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .chip { transition: background .15s ease, border-color .15s ease, color .15s ease; } .chip:active { background: var(--surface-2); } .chip-on { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-sm); } .chip-on .muted { color: rgba(255,255,255,.8); } .chip-add { color: var(--primary-ink); border-style: dashed; font-weight: 700; } /* 점검코드 + 근거(펼치기) */ .code-pill { display: inline-block; font-size: .76rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--info-bg); color: var(--info-text); font-variant-numeric: tabular-nums; } .basis-toggle { border: 1px solid var(--border); background: var(--surface); color: var(--accent); border-radius: 999px; padding: 7px 12px; font-size: .76rem; font-weight: 700; cursor: pointer; } .basis-toggle:active { background: var(--surface-2); } .basis-box { margin-top: 8px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: .82rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; } /* 현장기록 날짜 이동 바 */ .datebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; margin-bottom: 12px; } .datebar .db-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 10px 14px; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .datebar .db-btn:disabled { opacity: .4; cursor: default; } .datebar .db-label { font-size: .92rem; font-weight: 700; text-align: center; flex: 1; cursor: pointer; white-space: nowrap; min-width: 0; } .datebar .db-label .muted { font-weight: 500; margin-left: 4px; } /* 라벨 위에 깔리는 투명 date input — 탭하면 네이티브 달력 피커가 열린다 */ .db-date { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: 0; cursor: pointer; } /* 날짜 바 + 점검 팀 버튼 한 줄 — 팀 버튼은 날짜칸 박스 '밖'에 따로 */ .daterow { display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; } .daterow .datebar { flex: 1; min-width: 0; margin-bottom: 0; } .team-wrap { display: flex; } .team-btn { display: flex; align-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 12px; padding: 8px 10px; font-size: .8rem; font-weight: 700; max-width: 110px; cursor: pointer; } .team-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-btn-other { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-text); } /* 팀 선택 커스텀 드롭다운(버튼 아래 오른쪽 정렬) */ .team-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 150px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 4px; } .team-menu-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; font-size: .85rem; color: var(--text); border-radius: 8px; cursor: pointer; white-space: nowrap; } .team-menu-item:active { background: var(--surface-2); } .team-menu-item.on { font-weight: 700; color: var(--primary-ink); background: var(--surface-2); } .team-menu-item .muted { font-size: .72rem; } /* 하단 고정 동기화 바 */ .syncbar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; box-shadow: 0 -2px 12px rgba(16,24,40,.06); } .toast { position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%); background: #111827; color: #fff; padding: 11px 18px; border-radius: 10px; font-size: .9rem; z-index: 50; max-width: 90%; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.28); } a.linklike { color: var(--accent); text-decoration: none; font-weight: 600; } button.linklike { background: none; border: none; padding: 0; cursor: pointer; color: var(--accent); font-weight: 600; } /* ===== 대시보드 ===== */ .app.dash { max-width: 760px; } /* 프로필 */ .profile { display: flex; align-items: center; gap: 14px; } .avatar { width: 48px; height: 48px; border-radius: 999px; background: var(--bar); color: var(--bar-text); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; flex-shrink: 0; } .profile .pname { font-size: 1.1rem; font-weight: 700; } .profile .pmeta { font-size: .82rem; color: var(--muted); } .tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); } .tag-admin { background: var(--warn-bg); color: var(--warn-text); } /* '관리자' 강조 태그 */ .tag-indigo { background: var(--info-bg); color: var(--info-text); } /* 등록구분 등 정보 태그 */ /* 프로필 우측 통계 박스 */ .statbox { display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--surface-2); } .statbox .stat { padding: 8px 14px; text-align: center; min-width: 64px; } .statbox .stat + .stat { border-left: 1px solid var(--border); } .statbox .lbl { font-size: .7rem; color: var(--muted); } .statbox .val { font-size: 1.05rem; font-weight: 700; margin-top: 3px; } /* 캘린더 */ .cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; margin-bottom: 10px; } .cal-nav { flex-shrink: 0; } .cal-nav button { background: var(--chip-bg); border: none; border-radius: 8px; width: 32px; height: 32px; font-size: .95rem; cursor: pointer; color: var(--text); } .cal-month { font-size: .95rem; font-weight: 700; white-space: nowrap; } .cal-tabs { display: flex; gap: 6px; flex-wrap: nowrap; margin-left: auto; } .cal-tabs button { border: 1px solid var(--border); background: var(--surface); color: var(--muted); padding: 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .cal-tabs button.active { background: var(--bar); color: var(--bar-text); border-color: var(--bar); } /* 일/캘린더 보기 전환 토글 */ .view-toggle { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 12px; } .view-toggle button { flex: 1; border: none; background: none; color: var(--muted); padding: 8px 0; border-radius: 8px; font-size: .9rem; font-weight: 700; cursor: pointer; } .view-toggle button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); } /* 일 단위 보기(좌우 페이저) */ .day-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 0; } .day-arrow { background: var(--chip-bg); border: none; border-radius: 9px; width: 36px; height: 36px; font-size: 1.15rem; cursor: pointer; color: var(--text); flex-shrink: 0; } .day-arrow:active { background: var(--border); } .day-arrow.day-today { width: auto; padding: 0 11px; font-size: .82rem; font-weight: 700; color: var(--primary-ink); } .day-cur { flex: 1; text-align: center; font-size: 1rem; font-weight: 800; color: var(--text); } .day-cur.holi { color: var(--danger); } .day-pane { min-height: 72px; } /* 점검 종류 배지(종합/작동) */ .itype { flex-shrink: 0; font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .itype.jak { background: var(--info-bg); color: var(--info-text); } /* 작동점검 */ .itype.jong { background: var(--danger-bg); color: var(--danger-text); } /* 종합점검 */ /* 다른 팀 드롭다운 */ .team-dd { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 140px; max-height: 240px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 6px; } .team-dd-item { display: block; width: 100%; text-align: left; border: none !important; background: none !important; color: var(--text) !important; padding: 8px 10px !important; border-radius: 8px !important; font-size: .85rem !important; font-weight: 600 !important; cursor: pointer; } .team-dd-item:hover { background: var(--surface-2) !important; } .team-dd-item.active { background: var(--bar) !important; color: var(--bar-text) !important; } .team-dd-empty { padding: 10px; font-size: .82rem; color: var(--muted); } table.cal { width: 100%; border-collapse: collapse; table-layout: fixed; } table.cal th { font-size: .72rem; color: var(--muted2); font-weight: 600; padding: 4px 0; } table.cal th.sun { color: var(--danger); } table.cal td { border: 1px solid var(--border-soft); height: 76px; vertical-align: top; padding: 3px; cursor: pointer; } table.cal td.blank { background: var(--surface-2); cursor: default; } table.cal td .dnum { font-size: .75rem; color: var(--muted); } table.cal td.sun .dnum { color: var(--danger); } /* 일요일·공휴일 빨강 */ table.cal td.today .dnum { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 6px; font-weight: 700; } table.cal td.sel { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface-2); } .evchip { display: block; font-size: .7rem; line-height: 1.3; padding: 1px 4px; margin-top: 2px; background: var(--info-bg); color: var(--info-text); border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .evchip.all { background: var(--ok-bg); color: var(--ok-text); } .evmore { display: block; font-size: .7rem; font-weight: 700; color: var(--muted); padding: 1px 4px; } /* 선택한 날짜 일정 행 */ .ev-row { display: flex; align-items: center; gap: 10px; padding: 12px 6px; border-bottom: 1px solid var(--border-soft); cursor: pointer; } .ev-row:active { background: var(--surface-2); } .evtag { display: inline-block; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--info-bg); color: var(--info-text); margin-right: 6px; vertical-align: middle; } .evtag.all { background: var(--ok-bg); color: var(--ok-text); } /* 직원 명부 (컴팩트) */ .staff-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--border-soft); } .staff-row:last-child { border-bottom: none; } .avatar.sm { width: 32px; height: 32px; font-size: .9rem; } .callbtn { text-decoration: none; font-size: .78rem; font-weight: 700; color: var(--chip-text); padding: 8px 13px; border-radius: 999px; background: var(--chip-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* 햄버거 + 드로어 */ .hamburger { background: rgba(255,255,255,.18); border: none; color: var(--bar-text); font-size: 1.15rem; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; line-height: 1; } .drawer-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 70; display: none; } .drawer-back.open { display: block; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 264px; max-width: 82%; background: var(--surface); z-index: 71; transform: translateX(100%); transition: transform .22s ease; box-shadow: -2px 0 14px rgba(0,0,0,.18); display: flex; flex-direction: column; padding: 14px; overflow-y: auto; /* 메뉴(섹션 라벨 포함)가 화면보다 길면 스크롤 */ } .drawer.open { transform: translateX(0); } .drawer .divider { height: 1px; background: var(--border); margin: 8px 4px; } .drawer a.danger { color: var(--danger); } .drawer .drawer-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--muted); font-size: .8rem; padding: 4px 8px 12px; } .drawer .drawer-head button { background: none; border: none; font-size: 1.2rem; color: var(--muted2); cursor: pointer; } .drawer a { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 600; font-size: .95rem; } .drawer a:active { background: var(--surface-2); } /* 테마 선택 — 상단바 드롭다운 */ .theme-dd { position: relative; display: inline-flex; } .theme-dd-btn { background: rgba(255,255,255,.18); border: none; color: var(--bar-text); width: 70px; height: 32px; border-radius: 999px; cursor: pointer; font-size: .8rem; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } /* 버튼에 현재 테마 이름 표시 */ html[data-theme="light"] .theme-label::before { content: "라이트"; } html[data-theme="dark"] .theme-label::before { content: "다크"; } html[data-theme="basic"] .theme-label::before { content: "베이지"; } .theme-dd-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 6px; display: none; flex-direction: column; gap: 4px; z-index: 80; min-width: 116px; } .theme-dd-menu.open { display: flex; } .theme-dd-menu .theme-btn { width: 100%; } /* 테마 선택 (드로어 — 미사용, 호환용) */ .theme-row { padding: 6px 8px; } .theme-row .lbl { font-size: .72rem; color: var(--muted); font-weight: 700; margin-bottom: 6px; } .theme-row .btns { display: flex; gap: 6px; } .theme-btn { flex: 1; padding: 7px 0; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; font-size: .8rem; font-weight: 600; cursor: pointer; } .theme-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* 탭바 (관리자) */ .tabbar { display: flex; gap: 6px; margin-bottom: 14px; } .tabbar button { flex: 1; padding: 10px 6px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 10px; font-weight: 700; font-size: .85rem; cursor: pointer; } .tabbar button.active { background: var(--bar); color: var(--bar-text); border-color: var(--bar); } /* 모달 */ .modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; } .modal { background: var(--surface); border-radius: 16px; padding: 18px; width: 100%; max-width: 380px; box-shadow: var(--shadow-md); } .modal h3 { margin: 0 0 12px; font-size: 1rem; } /* 공용 확인/알림 다이얼로그(dialog.js) — 다른 모달·드로어 위에 뜨도록 z-index 최상위 */ .dlg-back { z-index: 90; } .dlg { max-width: 340px; } .dlg-msg { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text); white-space: pre-wrap; } .dlg-actions { display: flex; gap: 8px; margin-top: 16px; } .dlg-btn { flex: 1; padding: 12px; font-size: .92rem; } .btn-dlg-danger { background: var(--danger); color: #fff; } /* 파괴적 동작 확정 버튼 */ /* ===== 모바일 컴팩트 (홈 대시보드 세로 밀도 ↑) ===== */ @media (max-width: 520px) { header.appbar { padding: 10px 14px; } header.appbar h1 { font-size: 1rem; } .content { padding: 12px; } .card { padding: 13px; margin-bottom: 10px; border-radius: 11px; } /* 프로필 */ .profile { gap: 11px; } .avatar { width: 42px; height: 42px; font-size: 1.05rem; } .profile .pname { font-size: 1.02rem; } .profile .pmeta { font-size: .78rem; } .statbox .stat { padding: 6px 11px; min-width: 54px; } .statbox .val { font-size: .98rem; } /* 캘린더 — 셀 높이를 줄여 세로 점유를 크게 절감 */ .cal-head { margin-bottom: 8px; gap: 6px; } .cal-month { font-size: .86rem; } .cal-nav button { width: 27px; height: 27px; font-size: .85rem; } .cal-tabs { gap: 4px; } .cal-tabs button { padding: 4px 8px; font-size: .72rem; } table.cal td { height: 54px; } } /* ========================================================================= 유틸리티 + 공용 컴포넌트 (인라인 스타일 이관용) - 템플릿의 정적 style="..." 을 의미/조합 가능한 클래스로 대체한다. - 동적 :style(상태 의존)은 그대로 둔다. ========================================================================= */ /* 레이아웃 */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-stretch { align-items: stretch; } .items-baseline { align-items: baseline; } .justify-between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .nowrap { white-space: nowrap; } .flex-1 { flex: 1; } .flex-grow0 { flex: 0 0 auto; } .flex-eq { flex: 1 1 0; } .min-0 { min-width: 0; } .w-auto { width: auto; } .w-full { width: 100%; } .col-span { grid-column: 1 / -1; } .pointer { cursor: pointer; } .relative { position: relative; } /* 간격(gap) */ .gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } /* 바깥 여백(margin) */ .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 1px; } .mt-2 { margin-top: 2px; } .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mb-4 { margin-bottom: 4px; } .mb-6 { margin-bottom: 6px; } .mb-8 { margin-bottom: 8px; } .mb-10 { margin-bottom: 10px; } .mb-14 { margin-bottom: 14px; } .ml-auto { margin-left: auto; } .ml-4 { margin-left: 4px; } .ml-6 { margin-left: 6px; } .justify-end { justify-content: flex-end; } .py-10 { padding: 10px 0; } .py-12 { padding: 12px 0; } .pad-sm { padding: 10px 14px; } .pad-md { padding: 12px 16px; } /* 글자 */ .fs-72 { font-size: .72rem; } .fs-75 { font-size: .75rem; } .fs-78 { font-size: .78rem; } .fs-8 { font-size: .8rem; } .fs-82 { font-size: .82rem; } .fs-85 { font-size: .85rem; } .fs-9 { font-size: .9rem; } .fs-1 { font-size: 1rem; } .fs-102 { font-size: 1.02rem; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .ta-center { text-align: center; } .ta-right { text-align: right; } .lh-12 { line-height: 1.2; } .p6x4 { padding: 6px 4px; } .empty-state { padding: 22px 4px; text-align: center; } .text-err { color: var(--danger); } .text-ok { color: var(--green); } .text-muted { color: var(--muted); } .break-word { word-break: keep-all; } /* 모달 본문 스크롤 */ .modal-scroll { max-height: 85vh; overflow: auto; } .modal-scroll-lg { max-height: 88vh; overflow: auto; } /* 내용 너비 버튼(.btn 의 width:100% 해제) + 자주 쓰는 크기 */ .btn-auto { width: auto; } .btn-sm { width: auto; padding: 8px 14px; font-size: .85rem; } .btn-md { width: auto; padding: 10px 16px; } .btn-xs { width: auto; padding: 6px 14px; font-size: .8rem; } .btn-pill { width: auto; padding: 6px 16px; } .btn-danger { background: var(--danger-bg); color: var(--danger-text); } .btn-del-outline { color: var(--danger); border-color: var(--danger-border); } /* 빨강 외곽 보조 버튼(코드 지우기 등) */ /* 목록 한 줄(좌우 배치 + 아래 구분선) */ .list-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--border-soft); } /* 카드 안 구분선(위 경계 + 여백) */ .section-divider { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; } /* 안내 박스(공유 보기 안내 등) */ .notice { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: .85rem; } /* 경고 박스(키 만료/오프라인 등 주의 안내) */ .warn-box { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); border-radius: 10px; padding: 10px 12px; font-size: .85rem; } /* 모달 우상단 닫기(×) */ .modal-x { background: none; border: none; font-size: 1.3rem; color: var(--muted2); cursor: pointer; } /* 작은 컨트롤의 보이지 않는 터치 영역 확장(시각 크기 유지, 히트 영역만 44px 근처로). overflow:hidden 컨테이너 안(.thumb .rm, .code-chip 내부)은 잘리므로 패딩으로 해결. */ .modal-x, .cal-nav button, .day-arrow, .bl-x { position: relative; } .modal-x::after, .cal-nav button::after, .day-arrow::after, .bl-x::after { content: ""; position: absolute; inset: -7px; } /* 첫 로딩 스켈레톤 — Alpine 초기화 후 로그인 확인(authChecked) 동안 빈 화면 방지 */ .skel-card { height: 76px; border-radius: 14px; border: 1px solid var(--border); margin-bottom: 12px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: skel-shimmer 1.2s linear infinite; } .skel-card.tall { height: 200px; } @keyframes skel-shimmer { to { background-position: -200% 0; } } /* 키보드 포커스 표시(입력칸은 위의 :focus 스타일이 담당) */ button:focus-visible, a:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 2px; } /* 로그인 카드(현장기록·대시보드 공용) */ .login-card { margin-top: 24px; } .login-sub { margin: 0 0 8px; } .check-line { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-weight: 400; color: var(--text); cursor: pointer; } .check-line input { width: auto; margin: 0; } .form-err { color: var(--danger); font-size: .85rem; margin: 8px 0 0; } .form-actions { margin-top: 14px; } .req { color: var(--danger); }