/* =============================================================
   prs-common.css — mPRS 컨버전 공통 패턴 (동결 영역: 퍼블리싱 담당만 수정)
   기존 reset/common/style.css 를 보완하는 컨버전 전용 공통 스타일.
   화면별 screen.css 에는 "그 화면에만 있는" 스타일만 둔다.
   ============================================================= */

/* ---------- 화면 상태 3종 (data-state: loading | empty | error | ready) ---------- */
.screen_state { display: none; padding: 60px 0; text-align: center; color: var(--AJGrey300); }
.screen_state strong { display: block; font-size: 16px; color: var(--AJGrey500); margin-bottom: 8px; }
[data-state="loading"] .state_loading { display: block; }
[data-state="empty"] .state_empty { display: block; }
[data-state="error"] .state_error { display: block; }
[data-state]:not([data-state="ready"]) .asset_list { display: none; }

.spinner { width: 28px; height: 28px; margin: 0 auto 12px; border: 3px solid var(--AJGrey100);
           border-top-color: var(--AJPurple800); border-radius: 50%; animation: prs-spin .8s linear infinite; }
@keyframes prs-spin { to { transform: rotate(360deg); } }

/* ---------- 목록 카드 보조 (asset_list 계열 공통) ---------- */
.list_content p span { color: var(--AJGrey300); margin-right: 6px; }
.list_content p em { font-style: normal; }
.list_content p i { display: inline-block; width: 1px; height: 10px; background: var(--AJGrey100); margin: 0 8px; }
.qty_sum { font-weight: 700; color: var(--AJPurple800); }

/* ---------- 고객사 아이덴티티 — 레드 절제 적용 ---------- */
/* 필터 영역 하단 구분선: 기본 회색(레드는 액센트 요소에만 사용), 아래 콘텐츠와 20px 간격 확보 */
.filter_divider { display: none; } /* 구분선 제거 — 여백·카드 박스로 영역 분리 (2026-08-11 확정). 복원 시 height:1px;background:var(--AJGrey100);margin:0 -20px 20px */
.label_btn.active { border-color: var(--AJRed); background: rgba(233, 35, 52, .08); }
.label_btn.active span { color: var(--AJRed); }
.btn_primary { background-color: var(--AJRed); }
.state_empty .btn_reset_search { display: inline-block; margin-top: 12px; color: var(--AJRed); font-weight: 700; text-decoration: underline; }

/* ---------- 즐겨찾기 별 토글 (센터/운송사/제품 관리 화면 공통) ---------- */
.bookmark_star { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
                 font-size: 20px; color: var(--AJGrey100); cursor: pointer; background: none; border: 0; }
.bookmark_star.on { color: var(--AJRed); }
.bookmark_star svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- 간단 행 목록 (기준정보류: 이름+부가정보+우측 액션) ---------- */
.simple_list { margin-top: 8px; }
.simple_list li { display: flex; align-items: center; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--AJGrey50); }
.simple_list .row_main { flex: 1; min-width: 0; cursor: pointer; }
.simple_list .row_main strong { display: block; font-size: 15px; color: var(--AJBlack); font-weight: 700; }
.simple_list .row_main .row_sub { display: block; font-size: 12.5px; color: var(--AJGrey300); margin-top: 3px;
                                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-state]:not([data-state="ready"]) .simple_list { display: none; }

/* ---------- 큰글씨 모드 (html[data-font="large"]) ----------
 * 토글 주체: 실기=설정 화면→네이티브(WebView textZoom 병행 가능), 브라우저 데모=목업 브릿지(가A 버튼).
 * 원칙: 마크업 무변경 — 공통 컴포넌트 단위 확대 + 재배치(라벨-값 세로 스택, 터치 타깃 확대).
 * 밀도 높은 화면의 개별 보정은 해당 화면 CSS 에 같은 셀렉터 패턴으로 추가한다. */
html[data-font="large"] body { font-size: 18px; }
html[data-font="large"] header .header_inner h1 { font-size: 21px; }
html[data-font="large"] h3 { font-size: 19px; }

/* 폼: 라벨-값 가로 행 → 세로 스택 (은행앱형 재배치) */
html[data-font="large"] .form_row { flex-direction: column; align-items: stretch; gap: 7px; padding: 14px 0; }
html[data-font="large"] .form_row > label { width: auto; font-size: 16.5px; }
html[data-font="large"] .form_text { font-size: 19px; }
html[data-font="large"] input.form_text, html[data-font="large"] select.form_text { min-height: 50px; }
html[data-font="large"] .form_text::placeholder { font-size: 17px; }

/* 라디오 칩: 글자·터치 타깃 확대 */
html[data-font="large"] .radio_set { gap: 8px; }
html[data-font="large"] .radio_set label { padding: 12px 20px; }
html[data-font="large"] .radio_set span { font-size: 18px; }

/* 주요 버튼 */
html[data-font="large"] .btn { min-height: 56px; }
html[data-font="large"] .btn span { font-size: 19px; }

/* 텍스트 액션 링크(어포던스 개선 전 임시 확대) */
html[data-font="large"] .c_submit.size13 { font-size: 16px; }

/* 행형 테이블(요청제품 등) */
html[data-font="large"] .item_row { font-size: 17px; }
html[data-font="large"] .item_row input { font-size: 18px; min-height: 44px; }

/* 목록 카드·간단 행 (조회 화면 공통) */
html[data-font="large"] .simple_list .row_main strong { font-size: 19px; }
html[data-font="large"] .simple_list .row_sub { font-size: 16px; white-space: normal; }
html[data-font="large"] .simple_list li { padding: 16px 0; }
html[data-font="large"] .reg_body { padding-bottom: 120px; } /* 커진 하단 고정 버튼만큼 본문 여백 보정 */

/* ---------- 카드 목록 가독성 (행간·자간·행 간격 최적화 — 2026-09-09 현업 피드백) ----------
 * 원값(common.css 계승분): p 13px/행간 기본/행 간격 2px — 밀도가 높아 판독 불편.
 * 복원 시 이 블록 제거. */
ul.asset_list li { padding: 14px 16px; }
ul.asset_list li .list_title strong { font-size: 16.5px; line-height: 1.35; letter-spacing: -0.2px; }
ul.asset_list li .list_content > .sub_title { line-height: 1.4; letter-spacing: -0.1px; }
ul.asset_list li .list_content > div { margin-top: 8px; }
ul.asset_list li .list_content > div p { font-size: 13.5px; line-height: 1.55; letter-spacing: -0.1px; }
ul.asset_list li .list_content > div p + p { margin-top: 6px; }
ul.asset_list li .list_content > div p i { margin-top: 5px; }

/* ---------- 액션 버튼 어포던스 (텍스트 링크 → 버튼, 2026-09-09 현업 피드백) ----------
 * "탭하면 무언가 열리거나 실행되는 것"은 버튼으로 보이게 한다. 기존 c_submit size13 대체. */
.btn_action { display: inline-flex; align-items: center; justify-content: center; gap: 4px;
              padding: 9px 14px; border: 1px solid var(--AJRed); border-radius: 8px;
              color: var(--AJRed); font-size: 13.5px; font-weight: 700; background: #fff;
              cursor: pointer; text-decoration: none; }
.btn_action:active { background: rgba(233,35,52,.08); }

/* ---------- 큰글씨 모드 — 카드 목록·액션 버튼 보정 ---------- */
html[data-font="large"] ul.asset_list li { padding: 16px; }
html[data-font="large"] ul.asset_list li .list_title strong { font-size: 20px; }
html[data-font="large"] ul.asset_list li .list_title .badge { font-size: 14px; line-height: 24px; }
html[data-font="large"] ul.asset_list li .list_content > .sub_title { font-size: 16.5px; }
html[data-font="large"] ul.asset_list li .list_content > div p { font-size: 17px; line-height: 1.55; flex-wrap: wrap; }
/* 큰글씨에서는 "라벨 값 | 라벨 값" 2쌍 한 줄이 좁아짐 → 구분선(i)을 줄바꿈으로 전환 */
html[data-font="large"] ul.asset_list li .list_content > div p i { flex-basis: 100%; height: 0; border: 0; margin: 3px 0 0; }
html[data-font="large"] ul.asset_list li .list_content > div p + p { margin-top: 8px; }
html[data-font="large"] .btn_action { font-size: 17.5px; padding: 12px 18px; }

/* ---------- 상세 정보 카드(info_box — 상세 12화면 공통 클래스) 가독성 + 큰글씨 ----------
 * 화면 CSS 가 나중에 로드되므로 .container 를 붙여 우선순위 확보 */
.container .info_box p { font-size: 14px; line-height: 1.5; letter-spacing: -0.1px; padding: 7px 0; }
html[data-font="large"] .info_box p { font-size: 17.5px; flex-wrap: wrap; }
html[data-font="large"] .info_box p span { min-width: 92px; }
html[data-font="large"] .detail_title { font-size: 20px; }

/* ---------- 현업 피드백 반영 (2026-09-09): ①라벨 대비 강화 ②값 색 통일 ③선택 어포던스 ---------- */

/* ① 항목명·안내 문구 대비 강화 (원값: 카드 라벨 Grey300 #a1a1b2 ≈2.5:1, 폼 라벨 Grey200 — AA 미달) */
.list_content p span { color: var(--AJGrey500); }
.container .form_group .form_label,
.container .form_group.focused .form_label,
.container .form_group.fixed .form_label,
.container .form_group.readonly .form_label { color: var(--AJGrey500); }
.container .form_row > label { color: #62626E; }
.simple_list .row_main .row_sub { color: var(--AJGrey500); }
.container .info_box p span { color: var(--AJGrey500); }
.screen_state { color: var(--AJGrey500); }
.form_text::placeholder { color: #8F8F9C; }
.row_sub_inline { color: var(--AJGrey500); }

/* ② 일반 정보 값 색 통일 — 보라(AJPurple500)는 계승 CSS 잔재, 진색으로. 강조(합계·배지·경고)는 유지 */
ul.asset_list li .list_content > .sub_title { color: var(--AJGrey500); }
ul.asset_list li .list_content > div p em { color: var(--AJPurple800); }

/* ③ 선택 어포던스 — 선택형(select)=▼ · 검색형(팝업 검색)=돋보기 · 일자=달력. 마크업 무수정(data-action 셀렉터) */
select.form_text { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737380' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; }
.form_group[data-action] .form_text[readonly],
.form_row[data-action] input.form_text[readonly] { cursor: pointer; padding-right: 32px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737380' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
.form_group[data-action="openCalendar"] .form_text[readonly],
.form_row[data-action="openCalendar"] input.form_text[readonly] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737380' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E"); }

/* 큰글씨 모드 — 아이콘도 확대 */
html[data-font="large"] select.form_text { background-size: 17px; padding-right: 32px; }
html[data-font="large"] .form_group[data-action] .form_text[readonly],
html[data-font="large"] .form_row[data-action] input.form_text[readonly] { background-size: 19px; padding-right: 36px; }
/* ①-보강: 공통 패턴 밖 개별 화면의 '읽는 텍스트' 대비 상향 (비활성·장식성 연회색은 유지) */
.container .stoc_col p span { color: var(--AJGrey500); }   /* 거래처 재고 3분할 카드 라벨 */
.container .sign_slot span { color: var(--AJGrey500); }    /* 서명 안내 문구 */
.container .hello_bar > span { color: var(--AJGrey500); }  /* 메인 상단 보조 정보 */
.container .scan_btn span { color: var(--AJGrey500); }     /* 전표 스캔 안내 */

/* ---------- 자체 QA 반영 (2026-09-09): 카드 정렬 그리드 · 합계 푸터 ---------- */
/* 카드 정보 = 1행 1항목, 라벨 고정폭 — 행간·시작점 정렬 (기존: 한 행 2쌍·라벨 가변폭) */
ul.asset_list li .list_content > div p { flex-wrap: wrap; }
ul.asset_list li .list_content > div p > span { width: 64px; flex-shrink: 0; margin-right: 0; }
ul.asset_list li .list_content > div p > em { flex: 1; min-width: 0; padding-left: 0; }
ul.asset_list li .list_content > div p > i { flex-basis: 100%; height: 0; border: 0; margin: 6px 0 0; }
html[data-font="large"] ul.asset_list li .list_content > div p > span { width: 84px; }

/* 수량 합계 행 — 흘림 텍스트 → 테이블 마감 푸터형 */
.item_sum_row { display: flex; align-items: center; justify-content: space-between;
                border-top: 1px solid var(--AJGrey100); margin-top: 2px; padding-top: 10px; }
.item_sum_row.right { justify-content: flex-end; }
.sum_line { font-size: 15px; color: var(--AJPurple800); font-weight: 500; }
.sum_line .qty_sum { font-size: 17px; font-weight: 800; }
html[data-font="large"] .sum_line { font-size: 17px; }
html[data-font="large"] .sum_line .qty_sum { font-size: 19px; }

/* ---------- 조회 요약 카드 — 카드 버튼 규칙 (2026-09-09 확정, 레퍼런스: cent/stor_list) ----------
 * 카드 = 요약(배지·번호 / 제목 / 보조 1줄) + 상세 그리드 + 하단 버튼 상시 노출.
 * 이동형 [상세 보기 ›] = 상세 화면에 액션 있음 → 화면 이동 (그리드 상시 노출)
 * 확장형 [펼쳐 보기 ⌄] = 상세 화면 없음 → 카드 인라인 확장 (li.expandable, 기본 접힘) */
.card_status { display: flex; align-items: center; gap: 8px; }
.card_status .badge { margin-bottom: 0; }
.card_numb { font-size: 12px; color: var(--AJGrey300); }
.card_summary { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.card_summary_text { flex: 1; min-width: 0; }
.card_title { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card_meta { display: block; margin-top: 4px; font-size: 13px; color: var(--AJGrey500); }
.card_meta em { font-style: normal; }
.card_qty { flex-shrink: 0; font-size: 18px; font-weight: 800; color: var(--AJPurple800); }
.card_items { display: flex; gap: 8px; margin-top: 10px; font-size: 13px; line-height: 1.5; }
.card_items span { color: var(--AJGrey500); flex-shrink: 0; }
.card_items em { font-style: normal; color: var(--AJPurple800); }
.card_main + .list_content { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--AJGrey50); }
li.expandable .list_content { display: none; }
li.expandable.open .list_content { display: block; }
.card_detail_btn { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px;
    padding: 11px 0; border: 1px solid var(--AJGrey100); border-radius: 10px; background: #fff;
    font-size: 14px; font-weight: 700; color: var(--AJGrey500); }
.card_detail_btn:active { background: var(--AJGrey50); }
.card_detail_btn::after { content: ""; width: 14px; height: 14px; transition: transform .2s;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737380' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 14px; }
.card_detail_btn.expand::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737380' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
li.open .card_detail_btn.expand::after { transform: rotate(180deg); }
.card_detail_btn .when_open { display: none; }
li.open .card_detail_btn .when_closed { display: none; }
li.open .card_detail_btn .when_open { display: inline; }
/* 큰글씨 모드 */
html[data-font="large"] .card_title { font-size: 20px; }
html[data-font="large"] .card_meta { font-size: 16.5px; }
html[data-font="large"] .card_qty { font-size: 22px; }
html[data-font="large"] .card_items { font-size: 16.5px; }
html[data-font="large"] .card_detail_btn { font-size: 17.5px; padding: 13px 0; }

/* ---------- 하단 고정 버튼 바 공통 (화면별 중복 정의 승격 — 원본 KButtonsView 대응) ---------- */
.btn_wrap.btn_fixed_bottom { padding: 12px 20px 16px; background: #fff; }
.btn_wrap.btn_fixed_bottom .btn { height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: center; }
.btn_wrap.btn_fixed_bottom .btn_primary span { color: #fff; font-weight: 700; }
.btn_wrap.btn_fixed_bottom .btn_line { border: 1px solid var(--AJGrey100); background: #fff; }
.btn_wrap.btn_fixed_bottom .btn_line span { color: var(--AJGrey500); font-weight: 700; }
.btn_pair { display: flex; gap: 9px; }
.btn_pair .btn_line { flex: 1; }
.btn_pair .btn_primary { flex: 2; }

/* ---------- 기본 글자 크기 전반 상향 (2026-09-10 현업 피드백 — 보통 모드 기본값 확대, 2단계) ----------
 * 큰글씨 모드와 별개로, 주 사용자(기사) 가독성 기준으로 기본값을 두 단계 올린 값.
 * 1단계(+1px)가 체감이 약하다는 확인에 따라 본문 15.5px대로 재상향. */
header .header_inner h1 { font-size: 19px; }
ul.asset_list li .list_title strong { font-size: 18px; }
.card_title { font-size: 18px; }
.card_meta { font-size: 15px; }
.card_numb { font-size: 13px; }
.card_items { font-size: 15px; }
.card_qty { font-size: 20px; }
ul.asset_list li .list_content > div p { font-size: 15.5px; line-height: 1.5; }
ul.asset_list li .list_content > div p > span { width: 74px; }
ul.asset_list li .list_content > .sub_title { font-size: 14.5px; }
.badge.badge_small { font-size: 13px; }
.simple_list .row_main strong { font-size: 17px; }
.simple_list .row_main .row_sub { font-size: 14.5px; }
.container .info_box p { font-size: 16px; }
.container .form_row > label { font-size: 15.5px; }
.form_text { font-size: 16.5px; }
.form_text::placeholder { font-size: 16px; }
.radio_set span { font-size: 16px; }
.radio_set label { padding: 10px 16px; }
.item_row { font-size: 16px; }
.screen_state { font-size: 15.5px; }
.btn_action { font-size: 15.5px; }
.card_detail_btn { font-size: 16px; }
.sum_line { font-size: 16px; }
.sum_line .qty_sum { font-size: 18px; }