/* ============================================================================ * logis-mprs-view 전용 추가 스타일 (퍼블 복사본이 아님 — 이 파일만 서버가 소유한다) * * 퍼블 CSS(static/style/css/mobile/*.css, screens/**)는 퍼블 산출물의 복사본이라 고치지 않는다. * 퍼블에 없는 스타일이 필요하면 여기에만 추가하고, 무엇을 왜 넣었는지 함께 적는다. * 모든 화면이 공통 조각(fragments/common :: styles)으로 마지막에 읽는다. * ========================================================================== */ /* ---------- 목록 상태 배지 — 원본 앱과 같은 색 (2026-09-24) ---------- * 원본은 상태 배지를 solid 배경 + 흰 글자로 그린다(drawable/list_div_bg_*.xml). * 퍼블 배지(.badge_gray/.badge_blue/.badge_red)는 색이 달라 초록·주황을 표현할 수 없어, * 원본 색을 그대로 쓰는 배지 클래스를 따로 둔다. 모양·크기는 퍼블 .badge / .badge_small 을 그대로 쓴다. * gray #cacaca 접수·그 밖 (list_div_bg_gray) * green #23B400 대기·지점 (list_div_bg_green · main_bk_demd) * blue #1e90e5 지시 (list_div_bg_blue · bg_1e90e5) * orange #ff9929 내방 (list_div_bg_orange · orange) * red #ff666b (원본 그 밖 색 — 필요할 때 쓴다) * 적용: 출고요청 조회(400101)·출고요청 지시(400103) 처리상태·배차구분 배지 */ .badge.badge_state_gray { background: #cacaca; } .badge.badge_state_green { background: #23B400; } .badge.badge_state_blue { background: #1e90e5; } .badge.badge_state_orange { background: #ff9929; } .badge.badge_state_red { background: #ff666b; } .badge.badge_state_yellow { background: #e2ca12; } /* list_div_bg_yellow — 접수·환적 */ .badge.badge_state_dark { background: #606060; } /* list_div_bg_dark_gray — 14형 */ /* 글자 크기·색은 파일 끝 "상태 배지 글자" 에서 정한다 — 라벨 색 규칙(.info_box p span 등) 뒤에 두어야 확실히 적용된다 */ /* ---------- 제품 색상칩 — 원본 앱과 같은 제품 구분색 (2026-09-24) ---------- * 원본은 제품 행 앞 동그라미 아이콘을 기준정보의 `hexaCode`(제품 색상)로 칠한다 * (Color.parseColor + setColorFilter). 퍼블에는 자리가 없어 칩을 새로 둔다. * 값이 비었거나 #RGB·#RRGGBB 형식이 아니면 화면 JS 가 #333333 으로 대체한다 * (원본은 잘못된 값에서 예외가 난다 — 로컬 DB 이관 코드의 기본색과 같은 값). * 적용: 파렛트 계약 상세(500191) · 출고요청 등록(400102) · 출고요청 상세(400191) */ .item_chip { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: #333333; flex-shrink: 0; } /* ---------- 동작 없는 하단 버튼 (2026-09-24) ---------- * 원본은 상태에 따라 하단 버튼을 회색으로 두고 누르면 아무 동작도 하지 않는다 * (출고요청 지시 상세 400193 — 1 상태의 [단계취소], 3 상태의 [지시완료]). * 퍼블에는 .btn_primary.disabled 만 있어 테두리형 버튼의 비활성 표시가 없다. */ .btn_line.disabled { opacity: .45; } /* ---------- 상세 정보 카드 기본값 (2026-09-28) ---------- * 퍼블은 `.info_box` 를 상세 화면마다 각 화면 CSS 에 같은 값으로 두었는데, 목록 기준으로 만든 화면 * (거래처 조회 200101 등)에는 정의가 없다. 값은 퍼블과 같고, 화면 CSS 가 뒤에 로드되므로 덮어써도 문제없다. */ .info_box { background: var(--AJGrey10); border-radius: 12px; padding: 14px 16px; } .info_box p { display: flex; gap: 8px; padding: 6px 0; font-size: 14px; } .info_box p span { width: 78px; color: var(--AJGrey300); flex-shrink: 0; } .info_box p em { font-style: normal; color: var(--AJBlack); font-weight: 600; flex: 1; word-break: break-all; } /* 거래처 조회(200101) — 상세 본문 표시 규칙. 퍼블 상세 화면들이 자기 CSS 에 둔 것과 같은 값이며, * 이 화면 CSS(demd_info.css)에는 없어 화면 컨테이너로 범위를 좁혀 둔다. */ .demd_info .detail_body { padding-bottom: calc(96px + constant(safe-area-inset-bottom)); padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .demd_info [data-state]:not([data-state="ready"]) .detail_body, .demd_info [data-state]:not([data-state="ready"]) .btn_pair { display: none; } /* 실착지 관리(200103) 실착지 제목 · 출하처 관리(200104) 입고처 제목 — 원본은 마지막으로 누른 버튼에 따라 제목 배경색이 바뀐다 (신규 #23B400 · 저장 #333333 · 삭제 #ff666b · 그 밖 #1e90e5 — 원본 color.xml). 배경색은 화면 JS 가 지정하므로 여기서는 글자색·여백만 둔다. 퍼블에는 없는 표시다. */ .form_row > label.label_state { border-radius: 6px; padding: 6px 8px; color: #ffffff; text-align: center; } /* 상단 탭 (퍼블이 화면별 CSS 에 두었으나 없는 화면용 — 정의는 퍼블 screens/popup/demd_search.css 와 같다) 적용: 주변 거래처 검색(200102)의 수요처·계약처·전체조회 필터 */ .tab_bar { display: flex; border-bottom: 1px solid var(--AJGrey50); } .tab_item { flex: 1; text-align: center; padding: 13px 0; } .tab_item span { font-size: 15px; font-weight: 700; color: var(--AJGrey300); } .tab_item.active { border-bottom: 2px solid var(--AJRed); } .tab_item.active span { color: var(--AJBlack); } /* ---------- 지도 (카카오맵) — 2026-09-28 ---------- * 원본은 Google Maps 를 화면 안에 넣는다. 퍼블에는 지도 영역이 없고(지도 상세만 회색 플레이스홀더), * 화면별 CSS 의 .map_area 는 그 화면 전용이라 공용 지도 상자를 여기에 둔다. * 적용: 거래처 조회(200101) 업체위치 · 지도 상세(10005) · 주변 거래처 검색(200102) */ .map_box { position: relative; width: 100%; height: 220px; border-radius: 12px; overflow: hidden; background: var(--AJGrey10); } .map_box .map_view { width: 100%; height: 100%; } .map_box.map_tall { height: 58vh; border-radius: 0; } .map_tools { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; gap: 6px; } .map_tools a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.94); border: 1px solid var(--AJGrey100); border-radius: 9px; font-size: 12px; font-weight: 700; color: var(--AJGrey500); } .map_tools a.on { border-color: var(--AJRed); color: var(--AJRed); } .map_none { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 20px; text-align: center; font-size: 13.5px; color: var(--AJGrey300); } .my_address { display: flex; gap: 8px; align-items: baseline; padding: 10px 0; font-size: 13.5px; color: var(--AJGrey300); } .my_address em { font-style: normal; color: var(--AJBlack); font-weight: 600; flex: 1; word-break: break-all; } /* 지도 이름표 — 원본 텍스트 핀(map_name_selcet) 대역. 주변 거래처 검색의 [이름] 토글이 쓴다 */ .map_label { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 8px; background: rgba(255,255,255,.95); border: 1px solid var(--AJGrey100); border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--AJBlack); cursor: pointer; } /* 상세 정보 한 칸에 여러 줄 — 원본이 코드·명·작업장을 줄바꿈으로 이어 붙이는 칸(이동 상세 202091 출고처·입고처) */ .info_box p em.lines { white-space: pre-line; } /* 첨부 사진 가로 스크롤 — 원본 HorizontalScrollView + 썸네일(납품출고 상세 300191). 퍼블에는 사진 영역이 없다 */ .photo_scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .photo_item { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--AJGrey100); background: var(--AJGrey10); } .photo_item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 입고 등록 제품 행 — 퍼블은 유형·전체·오염·삭제 4칸이지만 원본에는 **파손** 칸이 있다(반납·회수입고 등록 300202·300203) */ .stor_register .item_row { grid-template-columns: 1.3fr 1fr 1fr 1fr 40px; } .stor_register .item_row span:first-child { display: flex; align-items: center; gap: 6px; } /* 입고 상세 제품 행 — 퍼블은 유형·전체·오염·파손 4칸이고 **행 삭제 버튼이 없다**(원본에는 행 삭제가 있다. 반납·회수입고 상세 300291·300292). 삭제 버튼 모양은 입고 등록 화면 CSS 와 같게 맞춘다 */ .stor_detail .item_row { grid-template-columns: 1.3fr 1fr 1fr 1fr 40px; } .stor_detail .item_row span:first-child { display: flex; align-items: center; gap: 6px; } .stor_detail .row_del { border: 0; background: none; color: var(--AJGrey200); cursor: pointer; } /* 수정할 수 없는 건(updtFlag != "1") — 원본은 행 삭제 버튼을 자리만 남기고 감춘다(INVISIBLE) */ .stor_detail .item_row.readonly .row_del { visibility: hidden; } .stor_detail .item_sum_row .btn_action[hidden] { display: none; } /* 제품 추가·제품 수량 변경 팝업(90014·90016) — 퍼블에 이 화면이 없어(퍼블은 90008 과 한 화면으로 묶었다) 화면 전용 CSS 가 없다. 표 스타일은 퍼블 입고 상세(screens/cent/stor_detail.css)와 같은 모양으로 여기에 둔다. 원본 헤더: 제품 | 요청수량 | 지시한수량 | 지시할수량(입력) */ .pallet_add .pick_body { padding-bottom: calc(96px + constant(safe-area-inset-bottom)); padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .pallet_add .item_table { border: 1px solid var(--AJGrey50); border-radius: 10px; overflow: hidden; } .pallet_add .item_row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; align-items: center; } .pallet_add .item_row > * { padding: 10px 8px; text-align: center; font-size: 14px; border-bottom: 1px solid var(--AJGrey50); } .pallet_add .item_row:last-child > * { border-bottom: 0; } .pallet_add .item_head { background: var(--AJGrey10); } .pallet_add .item_head span { font-size: 12.5px; font-weight: 700; color: var(--AJGrey500); } .pallet_add .item_row span:first-child { display: flex; align-items: center; gap: 6px; font-weight: 700; text-align: left; padding-left: 14px; } .pallet_add .item_row input { border: 0; outline: 0; width: 100%; text-align: center; font-size: 14px; background: transparent; } .pallet_add .btn_fixed_bottom { background: #fff; } /* 출고지시 관리 팝업(90015) — 원본은 병합/분리 두 목록인데 퍼블은 전혀 다른 화면(지시·대기·반려)이라 목록·행·화살표 스타일이 없다. 퍼블 화면 CSS(pick_body·btn_fixed_bottom)는 그대로 쓰고 나머지를 여기 둔다 */ .order_manage .manage_list { display: flex; flex-direction: column; gap: 8px; } .order_manage .manage_row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--AJGrey50); border-radius: 10px; background: #fff; } .order_manage .manage_row.is-base { border-color: var(--AJRed); background: rgba(233, 35, 52, .04); } .order_manage .manage_no { min-width: 26px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--AJGrey500); } .order_manage .manage_body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .order_manage .manage_body strong { display: flex; align-items: center; gap: 6px; font-size: 14px; } .order_manage .manage_meta { font-size: 12.5px; color: var(--AJGrey500); } .order_manage .manage_meta em { font-style: normal; } .order_manage .manage_move { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--AJGrey100); border-radius: 8px; color: var(--AJGrey500); flex-shrink: 0; } .order_manage .manage_move:active { background: var(--AJGrey10); } .order_manage .manage_empty { font-size: 13px; color: var(--AJGrey300); padding: 6px 2px; } /* 유형 수량 팝업(90008) — 원본은 제품 1건의 전체·오염·파손 3수량(자리별 휠 피커)인데 퍼블은 "유형/수량" 2칸 목록이라 이 구성의 스타일이 없다. 입력칸으로 바꾼 수량 줄을 여기 둔다 */ .pallet_edit .qty_item { display: flex; align-items: center; gap: 10px; font-size: 14px; } .pallet_edit .qty_item > span { width: 56px; color: var(--AJGrey300); flex-shrink: 0; } .pallet_edit .qty_item strong { display: flex; align-items: center; gap: 6px; font-size: 15px; } .pallet_edit .qty_box { border: 1px solid var(--AJGrey50); border-radius: 10px; overflow: hidden; } .pallet_edit .qty_row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--AJGrey50); } .pallet_edit .qty_row:last-child { border-bottom: 0; } .pallet_edit .qty_row > span { width: 56px; color: var(--AJGrey500); font-weight: 700; flex-shrink: 0; } .pallet_edit .qty_row input { flex: 1; min-width: 0; border: 1px solid var(--AJGrey100); border-radius: 8px; padding: 10px 12px; font-size: 18px; font-weight: 700; text-align: right; } .pallet_edit .qty_row em { font-style: normal; font-size: 13px; color: var(--AJGrey500); } /* 납품출고 제품수정 팝업(300192) — 퍼블에 이 화면이 없다(대응표에도 없었다). 원본 헤더: 제품 | 지시수량 | 출고수량(입력). 표 모양은 입고 상세(퍼블 stor_detail.css)와 같게 맞춘다 */ .cent_item_edit .edit_body { padding-bottom: calc(96px + constant(safe-area-inset-bottom)); padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .cent_item_edit .item_table { border: 1px solid var(--AJGrey50); border-radius: 10px; overflow: hidden; } .cent_item_edit .item_row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: center; } .cent_item_edit .item_row > * { padding: 10px 8px; text-align: center; font-size: 14px; border-bottom: 1px solid var(--AJGrey50); } .cent_item_edit .item_row:last-child > * { border-bottom: 0; } .cent_item_edit .item_head { background: var(--AJGrey10); } .cent_item_edit .item_head span { font-size: 12.5px; font-weight: 700; color: var(--AJGrey500); } .cent_item_edit .item_row span:first-child { display: flex; align-items: center; gap: 6px; font-weight: 700; text-align: left; padding-left: 14px; } /* 출고수량은 입력칸으로 보이게 둔다(2026-10-16 요청) — 테두리 없는 퍼블 표 어법으로는 입력란인지 모른다. 유형 수량 팝업(.pallet_edit .qty_row input)에서 쓰는 테두리·반경 값을 표 셀 크기에 맞춰 줄여 쓴다. */ .cent_item_edit .item_row input { width: 100%; border: 1px solid var(--AJGrey100); border-radius: 8px; padding: 7px 8px; text-align: center; font-size: 14px; font-weight: 700; background: var(--AJWhite); } .cent_item_edit .item_row input:focus { border-color: var(--AJPurple800); outline: 0; } .cent_item_edit .btn_fixed_bottom { background: #fff; } .cent_item_edit [data-state]:not([data-state="ready"]) .edit_body { display: none; } /* 전표출력 팝업(90009·90010) — 퍼블에 이 화면이 없다. 서명 상자·프린터 상태 줄을 여기 둔다 (상세 정보 카드 info_box 와 버튼 btn_pair 는 공통 스타일을 쓴다) */ .cent_print .print_body { padding-bottom: calc(96px + constant(safe-area-inset-bottom)); padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .cent_print .sign_box { border: 1px solid var(--AJGrey100); border-radius: 10px; background: #fff; min-height: 120px; display: flex; align-items: center; justify-content: center; padding: 8px; } .cent_print .sign_box img { max-width: 100%; max-height: 180px; } .cent_print .sign_none { font-size: 13px; color: var(--AJGrey300); } .cent_print .printer_state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; } .cent_print .printer_state span { color: var(--AJGrey500); } .cent_print .btn_fixed_bottom { background: #fff; } /* 업체 검색 팝업(90001) 위치 입력 줄·최근 위치 — 퍼블에 위치 영역이 없다(원본 et_common_search_position · history_tb "LOC"). 원본은 검색어 오른쪽의 110dp 칸이지만 웹은 아래 한 줄로 두었다. 칩은 퍼블 .recent_chip 을 그대로 쓴다 */ .demd_search .position_bar { display: flex; align-items: center; border-bottom: 1px solid var(--AJGrey50); margin-top: 8px; } .demd_search .position_bar .form_text { height: 40px; border: none; border-radius: 0; padding: 0 4px; } /* [지우기] — 줄 오른쪽 끝. 최근 검색어·최근 위치 두 줄이 같은 모양이다(2026-11-02 요청으로 최근 줄에도 생겼다) */ .demd_search .recent_wrap .recent_clear { margin-left: auto; padding-left: 6px; font-size: 12.5px; color: var(--AJGrey500); text-decoration: underline; } /* 헤더 제목 가운데 정렬 — **모든 화면 공통**(2026-10-06 요청. 메인만 적용했다가 전체로 넓혔다). 원본 툴바가 제목·로고를 가운데 두고(view_toolbar.xml 의 centerInParent) 버튼은 좌·우에 붙이는데, 퍼블 공통 CSS 는 h1 에 margin-right:auto 를 주어 제목을 왼쪽에 붙인다(common.css 188줄) — 그래서 여기서 되돌린다. 제목을 absolute 로 띄워 좌·우 버튼 폭에 영향받지 않게 하고(버튼은 space-between 으로 양끝에 붙는다), 제목이 길면 버튼과 겹치지 않도록 폭을 제한하고 말줄임한다. 서버 화면 57개 모두 header_inner = [좌 버튼][h1][우 버튼] 구조다 */ header .header_inner { position: relative; } header .header_inner h1 { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; max-width: calc(100% - 120px); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 메인(10001) 즐겨찾기 — 퍼블 회수최적화 시안의 "즐겨찾는 메뉴"(screens/reco/reco_apphome.html · .ah_fav)와 같은 타일 스타일로 맞춤 (2026-10-06 요청 — 라벨 문구 "즐겨찾기" 는 그대로 두고 모양만 바꿨다). 퍼블 메인 CSS(screens/common/main.css)는 3열·작은 카드인데, 시안은 2열·56px 타일·가운데 정렬이다. 퍼블 복사본은 고치지 않으므로 여기서 덮어쓴다. 상위메뉴명(small)은 서버 메인에만 있어 타일 안 보조 줄로 둔다 */ .main_home .menu_group_title { font-weight: 700; margin: 18px 0 10px; } /* 타일을 감싸는 회색 영역 — **공지 목록(.notice_list)과 같은 값**으로 맞췄다(2026-10-15 요청). 테두리·배경·라운드는 그대로 쓰고 그리드라 안쪽 여백만 사방으로 준다. 즐겨찾기가 없으면 빈 상자를 두지 않는다 */ .main_home .menu_grid { grid-template-columns: 1fr 1fr; gap: 9px; border: 1px solid var(--AJGrey100); border-radius: 10px; background: var(--AJGrey10); padding: 14px; } .main_home .menu_grid:empty { display: none; } .main_home .menu_grid a { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 10px; background: #fff; border: 1px solid var(--AJGrey100); border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--AJBlack); text-align: center; } /* 시안 타일은 메뉴명 한 줄이다 — 서버 메인에만 있는 상위메뉴명은 감춘다(되살리려면 이 줄만 지운다) */ .main_home .menu_grid a small { display: none; } .main_home .menu_grid a:active { background: rgba(36, 32, 51, 0.04); border-color: var(--AJPurple800); } /* 메인(10001) 공지 — 퍼블 회수최적화 시안 최하단 공지 카드(.ah_notice)의 회색 테두리 영역을 가져왔다(2026-10-07 요청). 시안은 공지 한 건이라 카드 하나지만, 메인은 최근 5건 목록이므로 **영역 하나로 목록 전체를 감싸고** 항목은 그 안의 줄(.notice_line)로 둔다 — 색·테두리·글자 값은 시안과 같다. 퍼블 메인 CSS 에는 공지 목록 스타일이 없다 */ .main_home .notice_list { border: 1px solid var(--AJGrey100); border-radius: 10px; background: var(--AJGrey10); padding: 0 14px; } .main_home .notice_list:empty { display: none; } /* 공지가 없으면 빈 회색 상자를 두지 않는다 */ .main_home .notice_line { display: flex; align-items: center; gap: 8px; padding: 12px 0; } .main_home .notice_list li + li .notice_line { border-top: 1px solid var(--AJGrey100); } /* 줄머리 점 — 퍼블 시안의 빨간 "공지" 배지 대신 제목과 같은 색의 작은 동그라미를 둔다(2026-10-07 요청) */ .main_home .notice_line .dot { flex-shrink: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--AJGrey500); } .main_home .notice_line .txt { flex: 1; min-width: 0; font-size: 13px; color: var(--AJGrey500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main_home .notice_line .arrow { color: var(--AJGrey300); font-weight: 700; } .main_home .notice_line:active .txt { color: var(--AJPurple800); } /* 메인(10001) 상단 사용자 정보 — 원본 activity_main.xml 의 사용자 정보 줄(센터명 · 사번 · 이름 | 직책)과 우측 설정·로그아웃 버튼(iv_main_user_info_setting·logout)을 맞춘 것(2026-10-07 요청). 퍼블 hello_bar 는 "이름 + 센터명 + 공지 N" 구성이라 값·배치가 다르다. 아이콘은 직접 그린 선 도형이다 */ .main_home .hello_bar { gap: 6px; } .main_home .hello_info { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--AJGrey500); } .main_home .hello_info strong { font-size: 15px; font-weight: 800; color: var(--AJBlack); } .main_home .hello_info .hello_sep { font-style: normal; color: var(--AJGrey200); } .main_home .hello_btns { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; } .main_home .hello_btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; } .main_home .hello_btn svg { width: 20px; height: 20px; fill: none; stroke: var(--AJGrey500); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .main_home .hello_btn:active { background: rgba(36, 32, 51, 0.06); } .main_home .hello_btn:active svg { stroke: var(--AJPurple800); } /* 설정(10003) 영역 구분 — 퍼블·원본 모두 제목(h3) + 행 나열이라 "내 정보 / 동작 설정 / 기기" 경계가 약했다(2026-10-07 요청). 공지 영역과 같은 톤(AJGrey10 바탕 · AJGrey100 선)으로 그룹 머리띠를 만들어 좌우 여백 밖까지 넓힌다. 퍼블 setting.css 는 복사본이라 고치지 않고, 퍼블의 mt16/mt24(!important) 대신 서버 클래스 .set_title 을 쓴다 */ .setting .set_title { margin: 22px -20px 0; padding: 11px 20px; background: var(--AJGrey10); border-top: 1px solid var(--AJGrey100); border-bottom: 1px solid var(--AJGrey100); font-size: 12.5px; font-weight: 800; color: var(--AJGrey500); } .setting .set_title:first-of-type { margin-top: 0; border-top: 0; } .setting .set_title + .form_row { border-top: 0; } /* 띠 바로 아래 행은 윗선을 겹치지 않는다 */ .setting .form_row:last-of-type { border-bottom: 0; } /* 마지막 행 아래 선 제거 */ /* 납품전표 스캔(100501) — 퍼블은 "스캔 내역 목록 + 일괄 등록" 구성인데 원본은 한 건씩 바코드·사진을 확인한다. 원본 구성(바코드 줄 + 촬영 이미지)에 필요한 것만 둔다(퍼블의 안내 영역·목록은 원본에 없어 쓰지 않는다) */ .scan_delv .scan_body { padding-bottom: calc(96px + constant(safe-area-inset-bottom)); padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .scan_delv .scan_image { border: 1px solid var(--AJGrey100); border-radius: 10px; background: var(--AJGrey10); display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 8px; } .scan_delv .scan_image img { max-width: 100%; max-height: 320px; } /* 월별 선택 팝업(PrsMonthPicker) — 원본 위젯 AJCalMonthSelector 와 같은 구성 (2026-10-14) 퍼블에 이 시안이 없어 서버 전용으로 둔다. 톤은 퍼블 레이어 팝업(.layer_wrap/.popLayer_view)에 맞췄다. 휠은 scroll-snap 세로 목록이고 가운데 선택선은 .prs_month_row 의 가상 요소다. 줄 높이 40px 은 month-picker.js 의 ITEM_H 와 **같아야 한다**(값 계산 기준). z-index 는 퍼블 팝업(100)보다 위, 로딩 표시(110)보다 아래. */ .prs_month { position: fixed; inset: 0; z-index: 105; display: flex; align-items: center; justify-content: center; } .prs_month .prs_month_bg { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.8); } .prs_month .prs_month_box { position: relative; width: 90%; max-width: 420px; background-color: #fff; border-radius: 16px; padding: 20px 16px 0; } .prs_month .prs_month_title { font-size: 16px; font-weight: 700; color: var(--AJPurple800); text-align: center; padding-bottom: 12px; } .prs_month .prs_month_row { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 0; } .prs_month .prs_month_row::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; transform: translateY(-50%); pointer-events: none; border-top: 1px solid var(--AJPurple500); border-bottom: 1px solid var(--AJPurple500); } .prs_month .prs_month_label { flex: 0 0 36px; font-size: 13px; font-weight: 700; color: var(--AJGrey500); } .prs_month .prs_month_wheel { flex: 1 1 0; min-width: 0; height: 120px; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .prs_month .prs_month_wheel::-webkit-scrollbar { display: none; } .prs_month .prs_month_items { padding: 40px 0; } .prs_month .prs_month_item { height: 40px; line-height: 40px; text-align: center; scroll-snap-align: center; font-size: 17px; color: var(--AJPurple800); } .prs_month .prs_month_foot { display: flex; margin-top: 16px; border-top: 1px solid var(--AJGrey50); } .prs_month .prs_month_btn { flex: 1 1 0; height: 52px; background: none; border: 0; font-size: 15px; color: var(--AJGrey500); } .prs_month .prs_month_btn.confirm { font-weight: 700; color: var(--AJPurple800); } /* 월 범위 표시 줄 — 원본은 "yyyy-MM ~ yyyy-MM" 한 줄을 누르면 위 팝업이 열린다 */ .sale_bill_request_list .month_range_text { display: flex; align-items: center; height: 52px; } /* 사원조회(100300) 전화 버튼 두 개 — 원본 UserListAdapter 복원 (2026-10-15) 원본은 일반전화·휴대폰 버튼이 따로 있고, 번호가 없으면 숨기지 않고 **흐린 아이콘**으로 두고 누를 수 없게 한다 (detail_btn_tel_off / detail_btn_phone_off + 리스너 null). 퍼블은 아이콘이 하나뿐이라 짝 배치와 off 상태를 여기 둔다. 아이콘 크기·색은 퍼블 화면 CSS(`screens/common/user_list.css` 의 `.row_call`)를 그대로 쓴다. */ .user_list .row_call_pair { display: flex; align-items: center; flex-shrink: 0; } .user_list .row_call.off { opacity: 0.3; pointer-events: none; } /* 달력(90002) — 원본 KCalendarView 를 직접 그린다 (2026-10-15) 퍼블에 달력 시안이 없어(퍼블은 기기 선택기 한 칸) 여기 둔다. 색·라운드는 퍼블 공통 변수를 쓴다. 원본 구성: 상단 년·월 이동(rl_calendar_move_*) + 주 헤더(일~토) + 날짜 그리드(오늘 강조 DayType.TODAY), 기간 모드는 시작·종료와 사이 날짜를 칠하고 월 제목을 누르면 그 달 전체를 고른다(onMonthSelected). */ .calendar .cal_nav { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 0; } .calendar .cal_nav .cal_move { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--AJPurple800); } .calendar .cal_nav .cal_title { flex: 1 1 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--AJPurple800); } .calendar .cal_week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--AJGrey500); padding: 6px 0; border-top: 1px solid var(--AJGrey50); border-bottom: 1px solid var(--AJGrey50); } .calendar .cal_week .sun { color: var(--AJRed); } .calendar .cal_week .sat { color: var(--AJPurple500); } .calendar .cal_grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; padding: 6px 0; } .calendar .cal_day { height: 40px; display: flex; align-items: center; justify-content: center; font-size: 14.5px; color: var(--AJPurple800); border-radius: 8px; } .calendar .cal_day.blank { visibility: hidden; } .calendar .cal_day.sun { color: var(--AJRed); } .calendar .cal_day.sat { color: var(--AJPurple500); } .calendar .cal_day.off { color: var(--AJGrey100); pointer-events: none; } .calendar .cal_day.today { font-weight: 700; text-decoration: underline; } .calendar .cal_day.between { background-color: var(--AJGrey10); border-radius: 0; } .calendar .cal_day.sel { background-color: var(--AJPurple800); color: #fff; font-weight: 700; } .calendar .cal_picked { color: var(--AJPurple800); font-weight: 700; } /* 업체 검색(90001) 위치 줄의 [현재위치] 버튼 — 원본 getLocationAddress 복원 (2026-10-15) 퍼블에 버튼이 없어 같은 줄 끝에 둔다. 모양은 퍼블 라벨 버튼(.label_btn)을 그대로 쓰고 자리만 잡는다. */ .demd_search .position_bar .position_now { flex-shrink: 0; margin-left: 8px; } /* 사이드 메뉴가 있는 화면의 툴바 — 원본 setMenu 화면은 좌 햄버거 + 우 홈이다 (2026-10-15) 홈 아이콘은 퍼블 자산에 없어 같은 톤의 인라인 SVG 로 그렸다(CLAUDE.md 아이콘 규칙). 퍼블 공통 CSS 는 .btn_right 에 margin-left:auto 를 주어 하나만 있다고 보므로, 우측 버튼이 둘인 화면(주변 거래처 검색 — 홈 + 다시 조회)만 둘째 버튼의 여백을 되돌린다. */ /* 홈 아이콘 — 퍼블 아이콘 박스와 같은 24px 로 두고 선 두께도 햄버거·검색과 같게 맞춘다(2026-10-15 요청). `header_menu.png`·`icon_search.png` 를 재어 보니 72px 원본에서 6px, 즉 **24px 기준 2px** 이다(SVG 는 stroke-width 2). */ header .header_inner .btn_right svg { width: 24px; height: 24px; } header .header_inner .btn_right + .btn_right { margin-left: 2px; } /* 뒤로가기 아이콘을 꺾쇠(<)로 (2026-10-15 요청) 퍼블 이미지(`header_back.png`)는 화살표(←)다. 요청대로 꺾쇠로 바꾸되 **선 두께는 검색 아이콘과 같게** 맞췄다 — `icon_search.png` 를 재어 보니 72px 원본에서 6px, 즉 24px 기준 **2px** 이다. 퍼블 CSS 는 고치지 않으므로 여기서 배경 이미지를 지우고 테두리 두 변으로 그린다(이미지 추가 없음). `i.header_back` 을 쓰는 모든 화면에 그대로 적용된다. */ i.header_back { background: none; } i.header_back::before { content: ""; position: absolute; top: 50%; left: 9px; width: 9px; height: 9px; border-left: 2px solid var(--AJPurple800); border-bottom: 2px solid var(--AJPurple800); transform: translateY(-50%) rotate(45deg); } /* 거래처 조회(200101) — 재고현황 품목 카드 사이 간격 (2026-10-16 요청: 최근 항목별 간격 추가). 품목이 여러 개면 카드가 퍼블 .mt8(8px) 로 붙어 나와 어느 품목의 최근입고일인지 구분이 어렵다. */ .demd_info [data-list="stocks"] .info_box + .info_box { margin-top: 12px; } /* ============================================================= 2026-10-16 보고 수정분 ============================================================= */ /* hidden 속성이 레이아웃 선언에 밀리지 않게 한다. `hidden` 은 UA 스타일시트의 display:none 이라 `.btn_pair{display:flex}` 같은 작성자 선언이 이긴다. 그래서 화면들이 jQuery `.toggle()`/`.hide()` 로 감췄는데, 그 함수는 인라인 display:block 을 넣어 flex 가 깨졌다(출고요청 상세의 [삭제][저장]이 세로로 쌓임). 표시 제어는 hidden 으로 하고 이 규칙으로 받친다. */ [hidden] { display: none !important; } /* 거래처 재고 조회(201001) — 큰글씨에서 입고·출고·재고 3열이 카드를 넘쳤다. flex 아이템의 min-width 기본값(auto)으로 줄어들지 못한 탓이다. 큰글씨에서는 세로로 쌓아 읽게 둔다. */ html[data-font="large"] .demd_stoc_list .stoc_grid { flex-wrap: wrap; } html[data-font="large"] .demd_stoc_list .stoc_col { flex: 1 1 100%; min-width: 0; } html[data-font="large"] .demd_stoc_list .stoc_head { font-size: 16px; } html[data-font="large"] .demd_stoc_list .stoc_col p { font-size: 16px; } html[data-font="large"] .demd_stoc_list .stoc_col p b { font-size: 17px; } /* 목록 카드(asset_list)의 긴 값 — 큰글씨에서 비고가 줄바꿈되지 않거나 잘렸다. `p` 가 flex 라 `em` 이 min-width:auto 로 버텨 한 줄을 넘긴다(납품출고 조회·출고요청 조회의 비고). */ html[data-font="large"] ul.asset_list li .list_content > div p em { min-width: 0; flex: 1 1 auto; white-space: normal; word-break: break-all; } /* 납품출고 상세(300191) — 하단 고정 버튼([사진추가][출고완료])에 출고사진 영역이 묻혔다. 거래처 조회(.demd_info)와 같은 방식으로 본문에 하단 여백을 둔다. 큰글씨는 버튼이 더 커져 더 준다. */ .cent_delv_detail .detail_body { padding-bottom: calc(96px + constant(safe-area-inset-bottom)); padding-bottom: calc(96px + env(safe-area-inset-bottom)); } html[data-font="large"] .cent_delv_detail .detail_body { padding-bottom: calc(128px + constant(safe-area-inset-bottom)); padding-bottom: calc(128px + env(safe-area-inset-bottom)); } /* 출고요청 상세(400191) — 화면 전용 클래스에 큰글씨 보정이 없어 제목·본문이 그대로였다. 하단 버튼은 큰글씨에서 글자가 커져도 좌우 배치를 지킨다(min-width:0). */ html[data-font="large"] .oper_call_detail .detail_title { font-size: 22px; } html[data-font="large"] .oper_call_detail .detail_body { padding-bottom: calc(128px + constant(safe-area-inset-bottom)); padding-bottom: calc(128px + env(safe-area-inset-bottom)); } html[data-font="large"] .btn_pair .btn { min-width: 0; } html[data-font="large"] .btn_pair .btn span { word-break: keep-all; } /* ---------- 상태 배지 글자 — 크기·대비 보정 (2026-10-16 요청) ---------- * 두 가지가 읽기 어려웠다. * ① 크기: 퍼블 `.badge_small` 이 12px 라 본문(`.info_box p` 14px)보다 작았다 → 본문과 같은 14px. * ② 색: 원본은 배경색 + 흰 글자(`font_ffffff`)인데 밝은 배경에서는 대비가 모자랐다 — * 흰 글자 기준 실측 대비 gray 1.64 · yellow 1.65 · orange 2.13 · green 2.76 · red 2.85 · blue 3.40 * (WCAG AA 는 4.5). **어두운 글자(#333)로 바꿔** 같은 배경에서 3.7~7.7 이 된다. * 어두운 배경인 dark(#606060)만 흰 글자가 6.29 로 충분해 그대로 둔다. * 퍼블 기본 배지(.badge_gray/.badge_blue/.badge_red)도 연한 배경 + 진한 글자 어법이라 톤이 어긋나지 않는다. * **`!important` 를 쓰는 이유**: 배지는 `` 이라 퍼블의 라벨 색 규칙에 걸린다 — * `.container .info_box p span { color: var(--AJGrey500) }`(prs-common.css, 특이도 0,3,2)가 * `.badge.badge_state_*`(0,2,0)를 이겨서 **배지 글자가 회색(#737380)으로 찍혔다**. * 그래서 흰 글자도 아니고 회색이라 `#cacaca`·`#e2ca12` 배경에서 대비가 2.8 밖에 되지 않았다(보고된 증상). * 퍼블 복사본은 고칠 수 없고(규칙), 문맥별로 선택자를 늘리면 화면마다 새 규칙이 필요하다. * 상태 배지는 색 자체가 뜻을 담는 요소이므로 라벨 색이 덮지 않도록 여기서 못박는다. * 상태 클래스를 하나씩 적는 것도 같은 이유다(`[class*=…]` 한 줄은 특이도가 더 낮다). */ .badge.badge_state_gray, .badge.badge_state_green, .badge.badge_state_blue, .badge.badge_state_orange, .badge.badge_state_red, .badge.badge_state_yellow, .badge.badge_state_dark { color: #333333 !important; font-size: 14px !important; line-height: 22px; padding: 0 8px; font-weight: 700; } .badge.badge_state_dark { color: #ffffff !important; } html[data-font="large"] .badge.badge_state_gray, html[data-font="large"] .badge.badge_state_green, html[data-font="large"] .badge.badge_state_blue, html[data-font="large"] .badge.badge_state_orange, html[data-font="large"] .badge.badge_state_red, html[data-font="large"] .badge.badge_state_yellow, html[data-font="large"] .badge.badge_state_dark { font-size: 16px !important; line-height: 25px; } /* ---------- 라벨 버튼(.label_btn) 큰글씨 보정 (2026-10-17) ---------- * 퍼블 `.label_btn` 은 `height:32px; font-size:12px` 고정이라 큰글씨 모드에서 **혼자 작게 남았다** * — 배차구분·조회 필터·유형 칩 등 26화면이 쓰는 클래스다(출고요청 상세의 "전반적으로 스타일 적용 안됨" 보고에 포함). * 글자·높이를 함께 올리고, 칩이 여러 개면 줄을 넘겨 한 줄에서 밀리지 않게 한다. */ html[data-font="large"] .label_btn { height: 38px; padding: 0 14px; font-size: 15px; border-radius: 19px; } html[data-font="large"] .label_btn_wrap { flex-wrap: wrap; row-gap: 8px; } html[data-font="large"] .info_box p em .label_btn { margin-bottom: 2px; } /* ---------- 출고요청 상세(400191) 버튼·입력칸 크기 통일 (2026-10-17 요청) ---------- * 한 줄에 [선택](`.btn_action` 15.5px)과 배차구분(`.label_btn` 12px)이 나란히 있어 **크기가 어긋났다**. * 다른 화면 기준: 출고요청 등록(400102)은 배차구분을 `.radio_set`(16px · padding 10/16)으로, * [선택]류는 `.btn_action`(15.5px · padding 9/14)으로 둔다 — 둘은 거의 같은 크기다. * 그래서 이 화면의 `.label_btn` 을 `.btn_action` 높이·글자에 맞춘다(알약 모양은 유지). * 적용 자리: 배차구분 [운영][지점][내방] · 요청제품 행의 [최소수량 N][11톤 N]. * ([희망일]·[지점선택]·[추가]·[삭제]는 이미 `.btn_action` 이라 그대로 둔다) * 요청수량 칸도 등록 화면처럼 퍼블 `.form_text` 를 쓰고(템플릿), 수량이라 폭만 좁힌다. */ /* [추가] 버튼(`.btn_action`)과 **같은 박스 모델**로 만든다 — 글자 중앙이 어긋나지 않는다. 앞서 `height` 를 고정하고 안쪽 `` 을 inline-flex 로 바꿨더니 중심이 밀렸다. `.btn_action` 은 높이를 세로 padding 으로만 만들고 span 은 손대지 않는다(그 구조를 그대로 따른다). **좌우 여백만 [추가] 버튼보다 좁게** 둔다(14 → 12px) — 배차구분은 2글자뿐이라 셋이 한 줄에 들어가야 한다. 세로 padding 은 같은 9px 이라 버튼 높이는 [추가]와 똑같다. */ .oper_call_detail .label_btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: auto; padding: 9px 12px; font-size: 15.5px; border-radius: 19px; } /* 퍼블 `.form_text` 의 테두리·높이는 `.form_group .form_text` 에만 걸려 있어(common.css 222행) info_box 행 안에서는 맨 입력칸으로 보였다 — 납품출고 제품수정 팝업(.cent_item_edit)과 같은 값으로 직접 준다 */ .oper_call_detail .info_box p em input.form_text { width: 120px; min-height: 38px; padding: 0 10px; text-align: right; font-weight: 700; border: 1px solid var(--AJGrey100); border-radius: 8px; background: var(--AJWhite); box-sizing: border-box; } .oper_call_detail .info_box p em input.form_text:focus { border-color: var(--AJPurple800); outline: 0; } html[data-font="large"] .oper_call_detail .label_btn { height: auto; padding: 12px 14px; font-size: 17.5px; border-radius: 23px; } html[data-font="large"] .oper_call_detail .info_box p em input.form_text { width: 140px; min-height: 50px; } /* 버튼 그룹(배차구분 3개 · 수량 더하기 2개)은 **한 줄에 균등 폭**으로 둔다 (2026-10-17 요청). 퍼블 `.label_btn` 이 `display:flex`(블록 레벨)라 낱개로 두면 버튼마다 한 줄을 차지했고, 폭도 글자 수에 따라 달랐다("최소수량 0" vs "11톤 0"). 그룹 래퍼 안에서 `flex:1` 로 나눠 같은 크기로 맞춘다. 간격은 `gap` 으로 주고, 퍼블의 `.label_btn + .label_btn{margin-left:8px}` 은 중복되므로 0 으로 덮는다. */ .oper_call_detail .info_box p em .label_btn_wrap { display: flex; align-items: center; gap: 6px; width: 100%; } .oper_call_detail .label_btn_wrap .label_btn { margin-left: 0; white-space: nowrap; box-sizing: border-box; } /* 배차구분(`.label_btn_wrap.fit_row`) — **한 줄을 구조적으로 보장한다**(2026-10-17 재수정 2차). 그룹을 전용 클래스로 가른 이유: 제품 행도 `.info_box` 를 쓰므로 문맥 선택자로는 두 규칙의 특이도가 같아져 섞인다. 앞서 내용 폭(`flex:0 0 auto`)으로 두고 "화면 폭이면 들어갈 것"이라 어림했는데, 기기·글꼴에 따라 넘쳤다. 이제는 `nowrap`(줄바꿈 금지) + `flex:1 1 0`(남는 폭을 정확히 3등분) + `min-width:0`(글자보다 좁아져도 허용)이라 **값 칸이 아무리 좁아도 셋이 한 줄에 남는다**. 과하게 넓어지는 것은 `max-width` 로 막아 작게 유지한다. */ .oper_call_detail .label_btn_wrap.fit_row { flex-wrap: nowrap; } .oper_call_detail .label_btn_wrap.fit_row .label_btn { flex: 1 1 0; min-width: 0; max-width: 84px; padding: 9px 4px; } html[data-font="large"] .oper_call_detail .label_btn_wrap.fit_row .label_btn { max-width: 96px; padding: 12px 4px; } /* 수량 더하기(제품 행)는 반대로 글자가 길어("최소수량 0" vs "11톤 0") 폭을 같게 나누고, 모자라면 줄을 넘긴다 */ .oper_call_detail [data-list="items"] .label_btn_wrap { flex-wrap: wrap; } .oper_call_detail [data-list="items"] .label_btn_wrap .label_btn { flex: 1 1 0; padding: 9px 12px; } html[data-font="large"] .oper_call_detail [data-list="items"] .label_btn_wrap .label_btn { flex-basis: 100%; padding: 12px 14px; } /* 버튼 글자는 가로·세로 모두 가운데. 안쪽 `` 은 **손대지 않는다** — `.btn_action` 이 그렇게 되어 있고(span 은 그냥 inline), 거기에 display 를 주면 중심이 밀렸다. */ .oper_call_detail .btn_action, .oper_call_detail .label_btn, .oper_call_detail .btn_wrap .btn { align-items: center; justify-content: center; text-align: center; } /* 작은 버튼들의 크기를 **요청제품 [추가] 버튼과 똑같이** 맞춘다 (2026-10-17 요청). 클래스(`.btn_action`)와 padding·글자는 이미 같았는데 `line-height` 를 상속받아 높이만 달랐다 — 요청정보 행은 1.3(130%), 제품 행은 1.5 라 제품 행의 [삭제]가 더 높았다. 버튼 쪽에서 1.3 으로 고정한다. */ .oper_call_detail .btn_action, .oper_call_detail .label_btn { line-height: 1.3; } /* **찌그러지지 않게 한다**(2026-10-17 요청) — 제품 행의 [삭제]는 행(flex)의 아이템이라 제품명이 길면 `flex-shrink:1` 로 눌려 [추가] 버튼보다 작아졌다. 글자도 줄바꿈되지 않게 둔다. 대신 제품명 칸(em)이 줄어들어야 하므로 `min-width:0` 을 줘 거기서 줄바꿈되게 한다. 이 화면(.oper_call_detail) 안에서만 적용한다 — 다른 화면은 건드리지 않는다. */ .oper_call_detail .btn_action { flex: 0 0 auto; white-space: nowrap; } .oper_call_detail .info_box p > em { min-width: 0; } /* 하단 [삭제]도 쌍인 [저장]과 글자 크기를 맞춘다 — 퍼블은 `.btn_primary` 에만 16px 을 주고 `.btn_line` 은 본문 크기(14px)를 상속해서 **[삭제] 글자만 작았다**. 높이·모양은 하단 고정 바 그대로 둔다 (작은 [추가] 크기로 줄이면 [저장]과 짝이 맞지 않고 하단 바가 무너진다). 이 화면 안에서만 고친다 — 같은 구조인 다른 화면은 건드리지 않는다. */ .oper_call_detail .btn_wrap .btn_line { font-size: 16px; } /* 큰글씨는 퍼블이 이미 `.btn span` 을 19px 로 통일하므로(prs-common.css) 여기서 더 줄 것이 없다 */ /* 행의 **타이틀·값·버튼을 모두 세로 중앙**에 둔다 (2026-10-17 요청). 퍼블 `.info_box p` 는 `display:flex` 지만 `align-items` 가 기본값(stretch)이라 라벨·값이 위로 붙고, 버튼이 섞인 행에서 중심이 어긋나 보였다. 값 칸 안의 글자·칩·버튼도 가운데로 맞춘다. */ .oper_call_detail .info_box p { align-items: center; } .oper_call_detail .info_box p > em, .oper_call_detail .info_box p > span, .oper_call_detail .info_box p > .btn_action { align-self: center; } .oper_call_detail .info_box p em > * { vertical-align: middle; } /* iOS 세이프 영역 — 홈 인디케이터 (2026-10-23 보고 수정) 앱이 WebView 를 화면 전체에 깔아 헤더가 상태바까지 올라갔다(iOS). 퍼블 common.css 는 이미 `#wrap .container header` 에 env(safe-area-inset-top) 을 넣어 두었는데, **viewport 에 viewport-fit=cover 가 없으면 iOS 는 env() 를 0 으로 준다** — 그래서 그 보정이 전혀 걸리지 않았다. 화면 템플릿 72개의 viewport 메타에 viewport-fit=cover 를 넣어 값을 살렸고(위쪽은 퍼블 규칙이 알아서 처리한다), 여기서는 퍼블이 다루지 않은 **아래쪽**만 보탠다 — 하단 고정 버튼이 홈 인디케이터에 가리지 않게 한다(퍼블 패딩 12/20/16 기준). 본문 여백(96px·큰 글씨 128px)에도 같은 값을 더해 두었다 — 화면별 규칙을 그 자리에서 고쳤다. 전역 규칙으로 덮지 않은 이유는 `#wrap .container` 가 ID 특이도라 화면별 값을 무시하기 때문이다. 사이드 메뉴 드로어는 screens/common/side_menu.css 가 이미 위쪽을 처리한다. 구형 iOS(11.0~11.2)를 위해 constant() 를 먼저 적고 env() 로 덮는다 — 순서를 바꾸면 최신 기기에서 깨진다. 안드로이드는 값이 0 이라 바뀌는 것이 없다. */ .btn_wrap.btn_fixed_bottom { padding-bottom: calc(16px + constant(safe-area-inset-bottom)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); } /* 상세 카드(info_box) 값이 한 줄로 흘러 넘치는 것 — 전 화면 공통 (2026-10-29 보고 수정) 구조는 `p`(flex) 안에 `span`(라벨, 78px 고정) + `em`(값, flex:1) 이다. 값이 길면 다음 줄로 접혀야 하는데 **flex 아이템의 기본 `min-width:auto`** 때문에 내용의 최소 너비(가장 긴 토막) 아래로 줄어들지 못하고 칸을 밀어내 가로로 넘쳤다. 공백 없는 주소·코드·비고에서 특히 심하다. 화면 CSS 중 일부만 `word-break: break-all` 을 갖고 있어 화면마다 결과도 달랐다(입고 상세·입고 미리보기는 없다). · `min-width:0` 으로 칸이 줄어들 수 있게 하고, `overflow-wrap:anywhere` 로 끊을 곳이 없어도 접는다. · 선택자를 `.container …` 로 둔 이유: **화면 CSS 가 이 파일보다 나중에 로드**되므로(템플릿에서 styles 조각 다음 줄) 같은 특이도로는 덮지 못한다. `.container .info_box p > em`(0,3,1) 이 화면 CSS `.info_box p em`(0,2,1) 을 이긴다. · `word-break: break-all`(화면 CSS)을 `break-word` 로 되돌린다 — 영문·숫자가 아무 데서나 끊기지 않게. · 라벨(span)은 폭이 고정이라 평소엔 영향이 없고, 긴 라벨일 때만 두 줄로 접힌다. · 줄바꿈 문자를 살리는 `em.lines`(white-space: pre-line)와 충돌하지 않는다 — 그쪽은 흰 공백 처리라 별개다. */ .container .info_box p > em, .container .info_box p > span, /* 2026-10-30 요청으로 범위를 넓혔다 — "모든 항목에 값이 길어지면 자동 줄바꿈". 목록 카드(list_content)·단순 목록(row_sub)·카드 제목(card_title)까지 같은 규칙을 건다. 퍼블은 `card_title`·`row_sub` 에 **nowrap + ellipsis** 를 걸어 한 줄로 자르고 있었다 — iOS 에서 작업장·비고·한도수량이 "줄바꿈되지 않는다"고 보고된 것이 이것이다(큰 글씨에서는 퍼블도 normal 로 푼다). */ .container .list_content p > em, .container .list_content p > span, .container .simple_list .row_main .row_sub, .container .card_title, .container .card_meta, .container .card_items em { min-width: 0; white-space: normal; /* 퍼블의 nowrap 해제 */ overflow: visible; /* ellipsis 해제 — 잘라내지 않고 접는다 */ text-overflow: clip; word-break: break-word; overflow-wrap: anywhere; } /* 거래처 조회 상세(200101) — 라벨이 값 위로 흘러 겹치던 것 (2026-10-29 보고 수정) 이 화면에만 **7자 라벨**이 있다("최근회수입고일"·"최근이동입고일", 14px 에서 약 98px). 공통 라벨 폭은 `width:78px` + `flex-shrink:0` 이라 줄지도 않고 넘쳐서 오른쪽 값 영역을 침범했다. 전 화면 라벨 143개 중 7자는 이 둘뿐이고 나머지는 4자 이하라(6자 3개는 공백·반각이 섞여 78px 에 들어간다) **공통 폭을 올리지 않고 이 화면만** 맞춘다 — 공통을 100px 로 올리면 모든 화면의 값 영역이 22px 씩 줄어든다. 카드 안 모든 행이 같은 폭을 쓰므로 값 시작 위치는 그대로 정렬된다(재고 카드도 같은 클래스 아래에 그려진다). 큰 글씨에서는 퍼블이 `flex-wrap:wrap` 을 켜 값이 다음 줄로 내려가므로, 라벨은 제 너비를 갖게 `auto` 로 둔다 (17.5px 에서 7자는 약 122px 라 고정 폭으로는 또 넘친다). */ .demd_info .info_box p > span { width: 100px; } html[data-font="large"] .demd_info .info_box p > span { width: auto; } /* 업체 검색 팝업(90001) 목록 행 — 원본 구성 복원 (2026-10-29 요청) 퍼블은 "업체명 + 코드 / 주소" 두 줄뿐이었다. 원본(item_demd_search_list.xml · PopupDemdSearchAdapter)은 기본정보 → 거래처명 → 작업장명 → 신주소 → 구주소 → 전화 여섯 줄에 **전화 버튼 두 개**(일반전화·휴대폰)를 둔다. 버튼 모양은 사원조회(.user_list .row_call)와 같은 규칙이다 — 번호가 없으면 숨기지 않고 흐리게 두고 누를 수 없게 한다. 퍼블 `.row_call` 스타일은 screens/common/user_list.css 에만 있어(그 화면만 로드한다) 같은 값을 여기에 둔다. */ /* 2026-11-02 요청: 좌우 나란히(40+40=80px) 두면 정보 영역이 좁아 — **위 일반전화 / 아래 휴대폰**으로 쌓는다. 폭이 36px 로 줄고, 왼쪽 `.row_main` 은 `flex:1`(퍼블 prs-common.css)이라 남는 44px 를 그대로 가져간다. 세로로 포개지는 만큼 버튼 높이는 32px 로 낮춰 행이 불필요하게 길어지지 않게 했다. */ .demd_search .row_call_pair { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; gap: 2px; } .demd_search .row_call { flex-shrink: 0; width: 36px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--AJPurple500); } .demd_search .row_call svg { width: 20px; height: 20px; } .demd_search .row_call.off { opacity: 0.3; pointer-events: none; } /* 기본정보 줄은 거래처명 위에 오므로 위쪽 여백을 없앤다(.row_sub 기본 margin-top:3px) */ .demd_search .row_main > [data-field="demdInfo"] { margin-top: 0; } /* 업체 검색 — 최근 검색어·최근 위치 칩 간격 (2026-10-30 요청 · 2026-11-01 보완) 퍼블 `.recent_wrap` 은 gap 6px 이라 칩이 붙어 보였다. 퍼블 CSS 는 고치지 않으므로 여기서 올린다. 10-30 에 gap 을 올렸지만 **칩끼리는 벌어지지 않았다** — 칩이 `.recent_wrap` 직계 자식이 아니라 `data-list` span 안에 들어가므로 바깥 gap 은 "최근" 라벨과 그 span 사이에만 걸린다. 그래서 칩 묶음인 span 자체를 flex 로 만들어 칩 사이에 간격을 준다. 두 줄(최근·최근 위치) 모두 같은 값이다. */ .demd_search .recent_wrap { gap: 10px; } .demd_search .recent_wrap > [data-list="recentItems"], .demd_search .recent_wrap > [data-list="positionRecentItems"] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; } /* 칩 안 [X] (2026-11-02 요청 — 그 한 건만 이력에서 지운다) 퍼블 `.recent_chip` 은 inline-block 이라 글자와 [X]를 나란히 두려면 flex 로 바꿔야 한다(퍼블 CSS 는 고치지 않는다). 오른쪽 안쪽 여백을 6px 로 줄이고 [X] 버튼이 22px 를 차지해, 작은 칩에서도 손가락이 닿는 영역을 확보한다. */ .demd_search .recent_chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 11px; } .demd_search .recent_chip .chip_text { white-space: nowrap; } .demd_search .recent_chip .chip_del { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--AJGrey300); } .demd_search .recent_chip .chip_del svg { width: 14px; height: 14px; } /* 2026-11-02: 11px 은 눌러야 할 자리가 잘 안 보여 키웠다 */ .demd_search .recent_chip .chip_del:active { color: var(--AJBlack); } /* 조회기간 버튼 — 날짜 글자만큼만 차지한다 (2026-10-31 요청) 2026-10-30 에 "날짜가 두 줄로 접힐 때 From 은 왼쪽·To 는 오른쪽" 을 맞추려고 버튼을 `flex: 1 1 auto` 로 늘리고 양끝 정렬(text-align-last)을 걸었는데, **버튼이 남은 공간을 모두 차지해 영역이 너무 커졌다**(이동 입고 조회 등). 두 줄로 접히던 것이 애초에 폭이 모자라서였으므로, **접히지 않게 해서** 두 문제를 함께 푼다 — 줄바꿈을 막으면 "시작 ~ 종료" 가 한 줄에 들어가고 버튼은 그 글자만큼만 넓어진다. 조회기간 버튼을 쓰는 화면 전부에 적용된다 — 회수입고·납품출고·이동 입출고·출고요청·파일 업로드 등. */ .pd_side [data-action="openPeriod"] { flex: 0 0 auto; } .pd_side [data-action="openPeriod"] [data-field="periodLabel"] { white-space: nowrap; /* 두 줄로 접지 않는다 — 접히지 않으면 좌우 정렬을 따로 맞출 일이 없다 */ text-align-last: auto; /* 10-30 에 넣은 양끝 정렬 해제 */ } /* 프린터 찾기 — 연결·페어링 중인 행 표시 (2026-10-30 요청) 공통 dim·프로그레스바는 2026-10-16 에 걷어냈으므로 **누른 행의 버튼만** 진행 상태로 바꾼다. 버튼 글자 앞에 작은 회전 표시를 두고(퍼블 .spinner 와 같은 모양) 다시 눌리지 않게 한다. */ .printer_find .btn_action.is_busy { opacity: 0.7; pointer-events: none; } .printer_find .btn_action.is_busy::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; border: 2px solid var(--AJGrey100); border-top-color: var(--AJPurple500); border-radius: 50%; animation: prs_spin 0.7s linear infinite; } @keyframes prs_spin { to { transform: rotate(360deg); } } /* 저장류 버튼 잠금 표시 (2026-10-30 요청 — 처리 중에는 다시 눌리지 않는다) 잠금 자체는 dom-guard.js 가 캡처 단계에서 막는다. 여기서는 "지금 처리 중" 이 보이게만 한다. pointer-events 까지 끊어 두 번째 탭이 아예 닿지 않게 한다(iOS 의 터치·클릭 이중 발화 대비). */ [data-prs-locked].is_locked { opacity: 0.55; pointer-events: none; } /* 메인 — 큰 글씨 (2026-10-31 보고 수정) "설정에서 크게로 바꿔도 메인은 그대로" 의 원인이다. 설정값(`html[data-font="large"]`)은 제대로 붙는데, **메인 전용 스타일에 큰 글씨 규칙이 하나도 없어** 글자 크기가 고정값 그대로였다. 퍼블 `prs-common.css` 의 큰 글씨 규칙은 공통 요소(헤더 제목·info_box·목록 카드)만 다루고, 메인의 즐겨찾기 타일·공지·인사말 줄은 **우리가 만든 것**이라 그 대상에 들어 있지 않았다. 퍼블이 쓰는 비율(13.5→17, 15→19 등 약 1.25배)에 맞춘다. */ html[data-font="large"] .main_home .menu_group_title { font-size: 17px; } html[data-font="large"] .main_home .menu_grid a { font-size: 19px; min-height: 68px; } html[data-font="large"] .main_home .notice_line { padding: 14px 0; } html[data-font="large"] .main_home .notice_line .txt { font-size: 16px; } html[data-font="large"] .main_home .hello_info { font-size: 16px; } html[data-font="large"] .main_home .hello_info strong { font-size: 18px; } /* 설정·로그아웃 아이콘도 글자에 맞춰 키운다(본문 아이콘 기본 20px) */ html[data-font="large"] .main_home .hello_btn svg { width: 24px; height: 24px; } /* 사이드 메뉴 — 화면을 떠나면서 닫을 때는 전환을 끈다 (2026-10-31 보고 수정) 퍼블 side_menu.css 는 드로어를 0.4초에 걸쳐 밀어 닫는다(transform·opacity·visibility). 메뉴를 골라 다른 화면을 열면 그 전환이 끝나기 전에 화면이 바뀌고, 앱은 떠나는 화면을 hide 로 쌓으므로 **닫히다 만 상태로 멈춘다** — 뒤로 돌아오면 그 장면이 이어져 보였다. `PrsSideMenu.close(true)` 가 이 클래스를 잠깐 걸어 그 자리에서 닫는다(퍼블 CSS 는 고치지 않는다). */ .side_menu.no_anim, .side_menu.no_anim aside, .side_menu.no_anim .aside_bg { transition: none !important; } /* 큰 글씨 — 조회기간 줄을 두 줄로 접는다 (2026-10-31 보고 수정) 한 줄에 [조회기간][지시조회][조회] 가 나란히 있는데, 큰 글씨(17.5px)에서는 날짜 21자가 길어져 오른쪽 버튼이 화면 밖으로 밀려 [조회] 가 잘렸다(반납입고 조회 등). 날짜 버튼에 한 줄을 통째로 주고 조회 버튼들을 아래로 내린다 — 날짜는 줄바꿈 없이 그대로 한 줄에 들어간다. 보통 글씨에서는 지금처럼 한 줄을 유지한다(이 규칙이 걸리지 않는다). `.pd_side` 안의 다른 flex_between(기간 버튼 줄·총 건수 줄)은 아이템이 하나뿐이라 영향이 없다. */ html[data-font="large"] .pd_side .flex_between { flex-wrap: wrap; row-gap: 8px; } html[data-font="large"] .pd_side [data-action="openPeriod"] { flex: 1 1 100%; /* 한 줄 전체 — 날짜가 잘리지 않는다 */ justify-content: space-between; /* 날짜는 왼쪽, 달력 아이콘은 오른쪽 */ } /* 조회 버튼 묶음은 다음 줄 오른쪽에 그대로 둔다 */ html[data-font="large"] .pd_side [data-action="openPeriod"] ~ .flex_start { margin-left: auto; } /* 파렛트 계약 조회 — 계약상태 버튼 [전체]/[유효] (2026-10-31 요청) 원본에는 "조회" 버튼이 없고 이 두 버튼이 각각 조회를 수행한다. 그래서 2026-10-30 에 더했던 [조회] 를 다시 뺐고, 두 버튼을 **조회 버튼(.btn_action)과 같은 크기**로 키워 오른쪽에 둔다. 퍼블 `.label_btn` 은 높이 32px·12px 글씨로 작고, `.label_btn + .label_btn` 의 간격도 8px 로 좁았다. */ .sale_cont_pallet_list .stat_btns { margin-left: auto; gap: 12px; } .sale_cont_pallet_list .stat_btns .label_btn { height: auto; /* 고정 높이를 풀고 .btn_action 과 같은 padding 으로 맞춘다 */ padding: 9px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--AJGrey500); } .sale_cont_pallet_list .stat_btns .label_btn + .label_btn { margin-left: 0; } /* 간격은 gap 이 맡는다 */ .sale_cont_pallet_list .stat_btns .label_btn.active { border-color: var(--AJRed); color: var(--AJRed); } html[data-font="large"] .sale_cont_pallet_list .stat_btns .label_btn { padding: 12px 18px; font-size: 17.5px; }