/* 모바일·터치 화면 보정 — 데스크톱 레이아웃은 그대로 두고, 작은 화면/터치 기기에서만 적용한다. 점검 기준: tests/ui/run_mobile.py (390px 터치 뷰포트에서 가로 넘침·터치 크기·입력 확대) */ /* 모든 화면: 더블탭 확대 지연 제거, 탭 하이라이트를 은은하게, 글자 크기 자동 확대 방지 */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } button, a, select, summary, label, input, textarea, [onclick] { touch-action: manipulation; } body { -webkit-tap-highlight-color: rgba(37, 99, 235, 0.12); } /* 노치·홈 바가 있는 기기에서 내용이 가려지지 않게 (viewport-fit=cover) */ #topbar { padding-top: max(0.75rem, env(safe-area-inset-top)); } #sidebar { padding-bottom: env(safe-area-inset-bottom); } #mainContent { padding-bottom: env(safe-area-inset-bottom); } @media (max-width: 767px), (pointer: coarse) { /* 문서 자체가 스크롤되게 한다 (네이버 같은 모바일 웹처럼). iOS Safari는 "문서"가 스크롤될 때만 하단 주소창 막대를 접고, 막대 뒤로 본문이 비쳐 보이게 한다. 예전에는 본문 안쪽 영역만 스크롤시켜서 막대 영역에 본문이 안 보이고 앱이 막대 위에서 끊겨 보였다. 상단 헤더는 sticky로 맨 위에 붙어 있고, 사이드바·모달은 원래 fixed다. */ html { background: #f9fafb; overscroll-behavior-y: contain; overflow-x: hidden; } /* overflow-x:clip을 모르는 iOS도 가로로 밀리지 않게 */ /* 당겨서 새로고침은 pullRefresh.js가 처리 */ body { height: auto !important; min-height: 100dvh; overflow: visible !important; } #dashboardSection, #mainContent { overflow: visible !important; } #mainContent { min-width: 0; width: 100%; } /* 안쪽이 넓어도 화면 폭을 넘지 않게 (넓은 표는 감싼 영역에서 가로 스크롤) */ body { overflow-x: clip !important; } #topbar { position: sticky; top: 0; } #finalReportCard { height: calc(100dvh - 170px); } /* 닫힌 사이드바는 화면 밖으로 밀어 두기만 하면 iOS Safari가 하단 막대 색을 그 어두운 패널 기준으로 잡아 닫은 뒤에도 주소창 쪽에 어두운 블록이 남았다. 닫히면 아예 렌더링하지 않는다(visibility). */ #sidebar { visibility: visible; transition: transform .2s, visibility 0s; } #sidebar.-translate-x-full { visibility: hidden; transition: transform .2s, visibility 0s linear .2s; } body.sidebar-open { overflow: hidden !important; } #sidebarBackdrop { background: rgb(0 0 0 / .35); } /* 입력칸이 자기 내용 폭(size=20 기본값 × 16px 글자)만큼 버티며 부모를 밀어내 화면 밖으로 넘치는 것을 막는다. iOS Safari는 날짜 입력칸이 특히 넓어서, 비어 있어도 카드 밖으로 삐져나왔다 */ input, textarea { min-width: 0; max-width: 100%; } input[type="date"], input[type="time"], input[type="month"] { display: block; width: 100%; box-sizing: border-box; min-height: 44px; -webkit-appearance: none; appearance: none; text-align: left; } input[type="date"]::-webkit-date-and-time-value { text-align: left; } /* 위 규칙이 숨김 날짜 입력칸(주간보고 표 안)까지 키우지 않게 */ td > input[type="date"][style*="opacity:0"] { width: 0; min-height: 0; } /* 경영 대시보드 주 선택: 옆의 새로고침 버튼과 한 줄에 들어오게 줄어든다 */ #execHomeWeek { min-width: 0; max-width: calc(100vw - 8.5rem); text-overflow: ellipsis; } /* iOS는 16px 미만 입력칸에 포커스를 주면 화면을 확대해 버린다 */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; } /* 손가락으로 누르기 쉬운 크기 (권장 40~44px) */ button, summary, select, .menu-item { min-height: 40px; } button { min-width: 36px; } #topbar button, [data-notif-bell] { min-width: 44px; min-height: 44px; } #topbarTitle { padding: 0.65rem 0; } input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; } label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 40px; display: inline-flex; align-items: center; gap: 0.5rem; } td button, th button { padding-left: 0.5rem; padding-right: 0.5rem; } /* 주간보고 업무 비중 숫자칸 등 좁은 칸 */ input.w-8.h-6 { width: 3rem !important; height: 2.25rem !important; } /* 모달은 화면 안에 들어오고 안에서 스크롤된다 */ .fixed.inset-0 > div { max-height: calc(100dvh - 1.5rem); overflow-y: auto; } /* 한글이 글자 단위로 줄바꿈되어 세로로 길어지는 것을 막는다 (단어 단위로 줄바꿈) */ body { word-break: keep-all; overflow-wrap: break-word; } /* 표는 좁게 구겨 넣지 않고 가로로 밀어 볼 수 있게 한다 (감싼 영역이 overflow-x-auto) */ .overflow-x-auto { -webkit-overflow-scrolling: touch; } .overflow-x-auto > table { min-width: 560px; } .overflow-x-auto > table:has(#workTableBody) { min-width: 640px; } textarea.work-content { min-height: 4.5rem; font-size: 16px !important; } /* 오른쪽 아래 도움말 버튼이 마지막 내용을 가리지 않도록 본문 끝에 여백 */ #mainContent::after { content: ''; display: block; height: calc(4.5rem + env(safe-area-inset-bottom)); } /* 도움말 버튼이 하단 도구 막대·홈 바 위에 오도록 */ .help-fab { bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important; } /* 알림 패널은 화면 폭에 맞춘다 */ #notifPanel { max-width: calc(100vw - 1rem); } } /* 당겨서 새로고침 표시 (js/pullRefresh.js) */ #pullRefreshBar { position: fixed; left: 50%; top: env(safe-area-inset-top); z-index: 60; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #6b7280; box-shadow: 0 2px 8px rgb(0 0 0 / .2); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(-50%, -40px); pointer-events: none; } #pullRefreshBar.ready { color: #2563eb; } /* 사이드바: 시스템 관리 하위 메뉴를 접었을 때 */ #sysSubmenu.collapsed { display: none; } /* 하위 메뉴는 사이드바와 같은 배경을 쓰고, 상위 메뉴 아이콘 아래로 이어지는 가는 세로선으로 소속을 보여 준다 */ #sysSubmenu { position: relative; } #sysSubmenu::before { content: ''; position: absolute; left: 26px; top: 2px; bottom: 6px; width: 1px; background: var(--c-sidebar-divide, #374151); } /* 모바일 서랍 - 768~1023px(태블릿): 옆에서 나오는 부분 서랍. 위쪽 앱 타이틀·알림은 상단 바와 중복이라 뺀다. - 767px 이하(폰): 전체화면 메뉴. 서랍이 화면 일부만 덮으면 iOS Safari의 하단 주소창 막대 위에서 경계가 "툭" 끊겨 어색하므로 화면 전체를 덮어 경계 자체를 없앤다 (네이버 같은 모바일 웹과 같은 방식). 위쪽에 앱 이름과 닫기(✕) 줄을 둔다. */ .sidebar-close-btn { display: none; } @media (max-width: 1023px) { #sidebarHeader { display: none; } #sidebar { padding-top: max(0.5rem, env(safe-area-inset-top)); border-radius: 0 1rem 1rem 0; box-shadow: 8px 0 24px rgb(0 0 0 / .25); } } @media (max-width: 767px) { #sidebar, #sidebar.-translate-x-full { width: 100% !important; border-radius: 0; box-shadow: none; padding-top: 0; transform: none !important; } /* 페이드·슬라이드 없이 한 번에 열고 닫는다. 전환 중에는 iOS Safari가 위(노치)·아래(주소창) 막대 색을 서랍색↔본문색 사이에서 여러 번 다시 잡아 깜빡여 보인다. */ #sidebar, #sidebar.-translate-x-full { transition: none !important; } #sidebar.-translate-x-full { opacity: 0; pointer-events: none; } #sidebarBackdrop { display: none !important; } /* 위쪽에는 프로필(앱 타이틀 자리)과 닫기(✕)만 둔다. 프로필 블록을 맨 위로 올리고, 헤더는 ✕ 버튼만 오른쪽 위에 겹쳐 둔다. */ #sidebarHeader { display: flex; position: absolute; top: env(safe-area-inset-top); right: 0.5rem; z-index: 6; padding: 0.5rem; border: 0; background: transparent; } #sidebarHeader h1, #sidebarHeader [data-notif-bell], #sidebarHeader .sidebar-collapse-btn { display: none !important; } #sidebar > .relative.border-t { order: -2; border-top: 0; border-bottom: 1px solid var(--c-sidebar-divide, #374151); padding-top: env(safe-area-inset-top); z-index: 5; } #sidebar > .relative.border-t > button { padding: 1rem 4rem 1rem 1rem; min-height: 64px; } #sidebar > .relative.border-t #sidebarUserAvatar { width: 2.5rem; height: 2.5rem; font-size: .875rem; } #sidebar > .relative.border-t #sidebarUserName { font-size: 1rem; } /* 프로필 메뉴는 위쪽 프로필 아래로 펼쳐지고, 화살표도 아래 방향으로 */ #sidebarUserMenu { top: 100%; bottom: auto !important; border-radius: 0 0 .5rem .5rem; box-shadow: 0 12px 24px rgb(0 0 0 / .35); } #sidebarChevron { transform: rotate(180deg) !important; } #sidebarChevron.rotate-180 { transform: rotate(0deg) !important; } #affiliationSwitcherWrap { order: -1; } .sidebar-close-btn { display: flex; min-width: 44px; min-height: 44px; } /* 서랍이 열려 있는 동안 뒤 본문이 스크롤되지 않게 본문을 그 자리에 고정한다 (iOS는 overflow:hidden만으로는 막지 못한다). 열 때 app.js가 현재 스크롤 위치를 body.style.top에 넣어 두고, 닫을 때 그 위치로 되돌린다. */ body.sidebar-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden !important; } /* 서랍 위쪽(프로필·✕)은 본문의 상단 바와 같은 색이다. 노치 쪽 색을 Safari가 서랍색으로 잡든 본문색으로 잡든 어색하지 않도록 노치 뒤 배경도 같은 색으로 둔다. 서랍 뒤 본문은 안 보이므로 열려 있는 동안 그리지 않는다. */ body.sidebar-open #mainContent { visibility: hidden; } html:has(body.sidebar-open), body.sidebar-open, body.sidebar-open #dashboardSection, body.sidebar-open #mainContent { background: var(--c-bg-surface, #fff) !important; } #sidebar > .relative.border-t { background: var(--c-bg-surface, #fff); border-bottom-color: var(--c-border, #e5e7eb); color: var(--c-text-primary, #111827); } #sidebar > .relative.border-t > button:hover { background: var(--c-bg-surface2, #f3f4f6); } #sidebar > .relative.border-t #sidebarUserName { color: var(--c-text-primary, #111827); } #sidebar > .relative.border-t #sidebarUserDept { color: var(--c-text-muted, #6b7280); } #sidebarChevron { color: var(--c-text-muted, #6b7280); margin-left: .25rem; } /* 드롭다운 화살표는 ✕가 아니라 프로필 이름 바로 옆에 붙인다 */ #sidebar > .relative.border-t > button > .flex-1 { flex: 0 1 auto; } #sidebarHeader .sidebar-close-btn { color: var(--c-text-secondary, #4b5563); } #sidebarHeader .sidebar-close-btn:hover { background: var(--c-bg-surface2, #f3f4f6); color: var(--c-text-primary, #111827); } #sidebar nav { overflow-y: auto; overscroll-behavior: contain; } #sidebar nav .menu-item { min-height: 48px; font-size: 1rem; } #sidebar nav #sysSubmenu .menu-item { min-height: 44px; font-size: .9375rem; } } /* 주간보고 업무 내역 표: 좁은 화면에서는 가로로 밀어 보는 표 대신, 한 행이 한 장의 카드로 세로로 쌓인다. 열 순서: 1 핸들 · 2 업무구분 · 3 솔루션구분 · 4 금주 · 5 차주 · 6 시작일 · 7 목표일 · 8 진행률 · 9 삭제 */ @media (max-width: 767px) { .overflow-x-auto:has(> #taskTemplateTable) { border: 0; overflow: visible; } .overflow-x-auto > table#taskTemplateTable { min-width: 0; display: block; } #taskTemplateTable thead { display: none; } #taskTemplateTable tbody { display: block; } #taskTemplateTable tbody tr { display: grid; grid-template-columns: 1fr 1fr 5rem; gap: .25rem .5rem; align-items: start; border: 1px solid #e5e7eb; border-radius: .75rem; padding: .625rem; margin-bottom: .75rem; } #taskTemplateTable tbody td { display: block; border: 0 !important; padding: 0 !important; min-width: 0; width: auto !important; } #taskTemplateTable td:nth-child(1) { display: none; } #taskTemplateTable td:nth-child(2) { grid-column: 1; grid-row: 1; } #taskTemplateTable td:nth-child(3) { grid-column: 2; grid-row: 1; } #taskTemplateTable td:nth-child(9) { grid-column: 3; grid-row: 1; text-align: right; } #taskTemplateTable td:nth-child(4), #taskTemplateTable td:nth-child(5) { grid-column: 1 / -1; } #taskTemplateTable td:nth-child(9) button { min-width: 44px; min-height: 44px; } #taskTemplateTable td::before { display: block; font-size: .7rem; font-weight: 600; opacity: .6; margin-bottom: .125rem; } #taskTemplateTable td:nth-child(2)::before { content: '업무구분'; } #taskTemplateTable td:nth-child(3)::before { content: '솔루션구분'; } #taskTemplateTable td:nth-child(4)::before { content: '금주 진행 사항'; } #taskTemplateTable td:nth-child(5)::before { content: '차주 진행 예정'; } #taskTemplateTable td:nth-child(6)::before { content: '시작일'; } #taskTemplateTable td:nth-child(7)::before { content: '목표일/완료일'; } #taskTemplateTable td:nth-child(8)::before { content: '진행률'; } #taskTemplateTable td:nth-child(8) { text-align: left !important; } #taskTemplateTable td select, #taskTemplateTable td textarea { border: 1px solid #d1d5db; border-radius: .5rem; padding: .5rem !important; width: 100%; } #taskTemplateTable td textarea { min-height: 6rem !important; } #taskTemplateTable td.weekly-date-cell .date-display { border: 1px solid #d1d5db; border-radius: .5rem; padding: .625rem .5rem !important; min-height: 44px; } #taskTemplateTable td input[type="number"] { border: 1px solid #d1d5db; border-radius: .5rem; width: 100%; min-height: 44px; } }