/* L2 공용 부품 — 여러 L2 화면이 같이 쓰는 모양(sdo-*) 한 벌 · 화면 하나만 쓰는 모양은 user/pages/{화면}.css
   모바일(≤980) 크기·고정 = user-mobile/user_mobile.css · 색·크기 = user_variables.css 토큰만
   base 공용(u-modal* · u-sr-only · u-flex 유틸)은 같이 쓰고 L2 모양은 여기서 덮는다(core/shell CONTRACT.md §2-D-13) */

/* ── 뷰포트 짝 ── */
/* .u-pc = PC(≥981px)만 · .u-mo = 모바일(≤980.98px)만 — 경계 짝 980.98/981(소수 폭 틈 없음) */
@media (min-width: 981px) { .u-mo { display: none !important; } }
@media (max-width: 980.98px) { .u-pc { display: none !important; } }

/* ── 키보드 초점 ── */
/* reset 이 지운 outline 의 대체 — 마지막 입력이 Tab·화살표일 때만(html.rn-pointer = 포인터 · rn_core.js) · 스크립트가 옮긴 포커스엔 안 붙는다 */
:where(html:not(.rn-pointer)) :focus-visible { outline: 3px solid var(--sdo-accent-line); outline-offset: 2px; }

/* ── 띠 ── */
/* 섹션 배경은 화면 끝까지 · 안쪽 .sdo-container */
.sdo-band { padding: var(--sdo-sp-32) 0; }
.sdo-band-head { background: var(--sdo-surface); padding: var(--sdo-sp-32) 0 var(--sdo-sp-24); border-bottom: 1px solid var(--sdo-line-soft); }
.sdo-page-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sdo-sp-16); flex-wrap: wrap; }
.sdo-page-title { margin: 0; font-size: var(--sdo-fs-2xl); font-weight: var(--sdo-fw-heavy); letter-spacing: -0.6px; line-height: 1.3; color: var(--sdo-ink); }
.sdo-page-sub { margin: var(--sdo-sp-8) 0 0; font-size: var(--sdo-fs-md); line-height: 1.6; color: var(--sdo-ink-muted); }

/* ── 흰 바탕 화면 ── */
/* 바탕 흰색 스위치 한 자리 — 표지 .sdo-page(머리 띠·본문 띠·위저드 폼) · 폭 = 셸 내용 폭(홈과 같은 넓은 판) · 홈만 회색 바탕(사용자 결정)
   부르는 화면 = 위저드 order_form·finder_form · 서류 상세 document_view · 대상찾기 결과 finder_result · 마이 my_verify·my_list·my_order_view */
body:has(.sdo-page) { background: var(--sdo-surface); }

/* ── 구역 ── */
/* 흰 바탕 위 내용 묶음 — 상자 없음 · 구역 사이 = 간격(세로로만 쌓인다 · 가로 배치에 쓰지 않는다) */
.sdo-section + .sdo-section { margin-top: var(--sdo-sp-32); }
/* 구역 제목 한 등급 — 결과 «입력한 조건» · 마이 상세 «신청 정보·고른 서류» · 서류 상세 «내용·적용법» */
.sdo-section-title { margin: var(--sdo-sp-32) 0 var(--sdo-sp-12); font-size: var(--sdo-fs-xl); font-weight: var(--sdo-fw-heavy); letter-spacing: -0.4px; line-height: 1.35; color: var(--sdo-ink); }
.sdo-section-title:first-child { margin-top: 0; }

/* ── 상세 머리 ── */
/* 상세 화면(마이 상세 · 서류 상세)의 내용 제목 한 벌 — 왼쪽 그림(서류) · 가운데 제목·한 줄 정보 · 오른쪽 상태 배지(마이) · 세로 가운데 · 아래 옅은 선 · 목록·입력 화면의 화면 이름은 머리 띠(.sdo-band-head) */
.sdo-detail-head { display: flex; align-items: center; gap: var(--sdo-sp-16); padding-bottom: var(--sdo-sp-20); border-bottom: 1px solid var(--sdo-line-soft); }
.sdo-detail-head-body { flex: 1; min-width: 0; }
.sdo-detail-title { margin: 0; font-size: var(--sdo-fs-2xl); font-weight: var(--sdo-fw-heavy); letter-spacing: -0.6px; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; color: var(--sdo-ink); }
.sdo-detail-meta { margin: var(--sdo-sp-4) 0 0; font-size: var(--sdo-fs-sm); color: var(--sdo-ink-muted); }

/* ── 배지 ── */
/* 작은 상태 표시 틀 한 벌(발주 상태 · 대상찾기 결과) — 색 클래스만 화면별(od-st-* = feature/order.css · fd-res-* = pages/finder.css) */
.sdo-badge { display: inline-flex; align-items: center; flex-shrink: 0; height: 26px; padding: 0 var(--sdo-sp-12); border-radius: var(--sdo-radius-pill); font-size: var(--sdo-fs-sm); font-weight: var(--sdo-fw-bold); white-space: nowrap; }

/* ── 버튼 ── */
.sdo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--sdo-btn-h); padding: 0 var(--sdo-sp-20);
    border: 1px solid var(--sdo-line); border-radius: var(--sdo-radius);
    background: var(--sdo-surface); color: var(--sdo-ink);
    font-family: inherit; font-size: var(--sdo-fs-md); font-weight: var(--sdo-fw-bold);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.sdo-btn i { font-size: var(--sdo-ic-sm); }
.sdo-btn-primary { background: var(--sdo-accent); border-color: var(--sdo-accent); color: var(--sdo-on-accent); }   /* 그림자 없음 — RISK_NOTE u-btn-primary 형(색만) */
/* 마우스가 있는 화면만 hover — 터치 화면은 누른 뒤 hover 색이 남는다 */
@media (hover: hover) {
    .sdo-btn:hover { border-color: var(--sdo-ink-faint); }
    .sdo-btn-primary:hover { background: var(--sdo-accent-hover); border-color: var(--sdo-accent-hover); }
}
.sdo-btn-ghost { background: var(--sdo-surface-soft); border-color: var(--sdo-surface-soft); color: var(--sdo-ink-sub); }
.sdo-btn-lg { height: var(--sdo-cta-h); padding: 0 var(--sdo-sp-32); font-size: var(--sdo-fs-lg); border-radius: var(--sdo-radius-lg); }
.sdo-btn-block { display: flex; width: 100%; }
.sdo-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ── 하단 버튼 줄 ── */
/* 내용 아래 오른쪽 · 모바일 화면 아래 고정은 표지 is-fixed 가 있을 때만(user_mobile.css) — 결과·서류 상세처럼 주 동작이 아래 고정이어야 하는 화면만 단다 */
.sdo-cta-bar { display: flex; justify-content: flex-end; gap: var(--sdo-sp-8); margin-top: var(--sdo-sp-24); }

/* ── 폼 칸 ── */
/* 입력칸 크기 한 등급 — 위저드 둘·마이 본인 확인이 같은 칸(칸 이름 = --sdo-fs-wz-text · 칸 높이·글씨 = --sdo-input-h-lg · --sdo-fs-wz-item · 모바일 = user_mobile.css) */
.sdo-field { margin-bottom: var(--sdo-sp-24); }
.sdo-req { color: var(--sdo-accent); margin-left: 2px; }   /* 필수 칸 표시 * — 필수 칸에만(신청자 네 칸) · 선택 칸(현장·요청사항)은 없다 */
.sdo-label { display: block; margin-bottom: var(--sdo-sp-8); font-size: var(--sdo-fs-wz-text); font-weight: var(--sdo-fw-bold); color: var(--sdo-ink-sub); }
.sdo-input {
    display: block; width: 100%; height: var(--sdo-input-h-lg);
    padding: 0 var(--sdo-sp-16);
    border: 1px solid var(--sdo-line); border-radius: var(--sdo-radius);
    background: var(--sdo-surface-soft); color: var(--sdo-ink);
    font-family: inherit; font-size: var(--sdo-fs-wz-item);
}
.sdo-input:focus { outline: none; border-color: var(--sdo-accent); background: var(--sdo-surface); box-shadow: 0 0 0 3px var(--sdo-accent-line); }
.sdo-input::placeholder { color: var(--sdo-ink-faint); }
textarea.sdo-input { height: auto; min-height: 140px; padding: var(--sdo-sp-12) var(--sdo-sp-16); line-height: 1.6; resize: vertical; }
input[type="file"].sdo-input { height: auto; padding: var(--sdo-sp-12) var(--sdo-sp-16); }

/* ── 빈 상태 ── */
/* 클래스 이름 u-empty 는 두 셸 한 벌 · 모양은 이 앱 */
.u-empty { text-align: center; padding: var(--sdo-sp-48) var(--sdo-sp-20); color: var(--sdo-ink-muted); }
.u-empty .empty-icon { font-size: var(--sdo-ic-2xl); line-height: 1; color: var(--sdo-ink-faint); }
.u-empty .empty-text { margin-top: var(--sdo-sp-12); font-size: var(--sdo-fs-lg); font-weight: var(--sdo-fw-bold); color: var(--sdo-ink); }
.u-empty .sdo-btn { margin-top: var(--sdo-sp-20); }

/* ── 표 ── */
/* PC 목록 — RISK_NOTE u-table 형: 옅은 테두리 틀 · 머리 줄 옅은 바탕 + 아래 선 · 머리·칸 가운데 정렬 */
.sdo-table-wrap { overflow-x: auto; border: 1px solid var(--sdo-line); border-radius: var(--sdo-radius); }
.sdo-table { width: 100%; border-collapse: collapse; }
.sdo-table th {
    padding: var(--sdo-sp-12) var(--sdo-sp-16); text-align: center; white-space: nowrap;
    background: var(--sdo-surface-soft);
    font-size: var(--sdo-fs-sm); font-weight: var(--sdo-fw-bold); color: var(--sdo-ink-sub);
    border-bottom: 1px solid var(--sdo-line);
}
.sdo-table td { padding: var(--sdo-sp-16); text-align: center; font-size: var(--sdo-fs-md); color: var(--sdo-ink-sub); border-bottom: 1px solid var(--sdo-line-soft); vertical-align: middle; }
.sdo-table tr:last-child td { border-bottom: none; }
.sdo-table tbody tr:hover td { background: var(--sdo-surface-soft); }
.sdo-table tbody tr[data-rn-href] { cursor: pointer; }   /* 행 전체 = 상세로(rn_core [data-rn-href] 한 벌 · 안쪽 링크는 제 동작) */
.sdo-table a { color: var(--sdo-ink); font-weight: var(--sdo-fw-bold); }
.sdo-table a:hover { color: var(--sdo-accent); }

/* ── 이름·값 줄 ── */
/* 상세 화면 */
.sdo-kv { margin: 0; }
.sdo-kv-row { display: flex; gap: var(--sdo-sp-16); padding: var(--sdo-sp-12) 0; border-bottom: 1px solid var(--sdo-line-soft); font-size: var(--sdo-fs-md); }
.sdo-kv-row:last-child { border-bottom: none; }
.sdo-kv-row dt { flex: 0 0 120px; color: var(--sdo-ink-muted); }
.sdo-kv-row dd { flex: 1; min-width: 0; margin: 0; color: var(--sdo-ink); font-weight: var(--sdo-fw-medium); word-break: break-word; }

/* ── 목록 줄 ── */
/* 모바일 카드 행 · 링크 */
.sdo-list-row {
    display: flex; align-items: center; gap: var(--sdo-sp-12);
    padding: var(--sdo-sp-16) 0; border-bottom: 1px solid var(--sdo-line-soft);
    color: inherit; text-decoration: none;
}
.sdo-list-row:last-child { border-bottom: none; }
.sdo-list-body { flex: 1; min-width: 0; }
.sdo-list-title { display: block; margin-top: var(--sdo-sp-4); font-size: var(--sdo-fs-md); font-weight: var(--sdo-fw-bold); color: var(--sdo-ink); }
.sdo-list-meta { display: block; margin-top: var(--sdo-sp-4); font-size: var(--sdo-fs-sm); color: var(--sdo-ink-muted); }
.sdo-list-row > .ti-chevron-right { flex: none; font-size: var(--sdo-fs-xl); color: var(--sdo-ink-faint); }

/* ── 위저드 단계 표시 ── */
/* PC — 마크업 u-wizard-progress/step/line 은 RN.wizardTabs 가 읽는다 · 선 두께·색·완료 색 = base u_components.css · 여기는 배치만 */
.sdo-steps { display: flex; align-items: flex-start; padding: 0; background: transparent; }
.sdo-steps .u-wizard-step { flex-direction: row; gap: var(--sdo-sp-8); cursor: pointer; }
.sdo-steps .step-num {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--sdo-line-soft); color: var(--sdo-ink-muted);
    font-size: var(--sdo-fs-md); font-weight: var(--sdo-fw-heavy);
}
.sdo-steps .step-label { align-self: center; font-size: var(--sdo-fs-md); font-weight: var(--sdo-fw-bold); color: var(--sdo-ink-muted); white-space: nowrap; }
.sdo-steps .u-wizard-line { align-self: center; margin: 0 var(--sdo-sp-12); }   /* 단계 한 칸 = 동그라미 높이 한 줄 → 그 가운데 */
.sdo-steps .u-wizard-step.active .step-num { background: var(--sdo-accent); color: var(--sdo-on-accent); box-shadow: 0 0 0 4px var(--sdo-accent-soft); }
.sdo-steps .u-wizard-step.active .step-label { color: var(--sdo-ink); }
.sdo-steps .u-wizard-step.completed .step-num { background: var(--sdo-accent-soft); color: var(--sdo-accent); }
.sdo-steps .u-wizard-step.completed .step-label { color: var(--sdo-accent); }

/* ── 둥근 체크 ── */
/* 진짜 checkbox(.sdo-check-input)는 시각적으로 숨기고(.u-sr-only 와 같은 선언) label 안 .sdo-check-box 가 그린다 — 키보드·스크린리더는 checkbox 그대로 */
:has(> .sdo-check-input) { position: relative; }   /* 숨긴 칸의 기준 = 감싼 label — 없으면 스크롤 칸 아래 칸이 문서 밖에 놓여, 누를 때 초점 스크롤이 위저드 화면 전체를 밀어 올린다 */
.sdo-check-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sdo-check-box {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: var(--sdo-check); height: var(--sdo-check); border-radius: 50%;
    border: 2px solid var(--sdo-ink-faint); background: var(--sdo-surface);
    color: transparent; font-size: 0.875rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sdo-check-box .ti { line-height: 1; }
.sdo-check-input:checked + .sdo-check-box { background: var(--sdo-accent); border-color: var(--sdo-accent); color: var(--sdo-on-accent); }
:where(html:not(.rn-pointer)) .sdo-check-input:focus-visible + .sdo-check-box { box-shadow: 0 0 0 3px var(--sdo-accent-line); }

/* ── 모달 ── */
/* 마크업·엔진 = base u-modal(user_modal.js) · 서류 모달(_document_modal.jsp)·약관 시트(_policy_popup.jsp) 한 모양 */
.sdo-modal { background: var(--sdo-scrim); }
.sdo-modal .u-modal { width: 92%; max-width: 760px; max-height: 86vh; max-height: 86dvh; border-radius: var(--sdo-radius-lg); box-shadow: var(--sdo-shadow-card-hover); overflow: hidden; }
.sdo-modal .u-modal-header { padding: var(--sdo-sp-20) var(--sdo-sp-24); border-bottom: 1px solid var(--sdo-line-soft); }
.sdo-modal .u-modal-title { font-size: var(--sdo-fs-lg); font-weight: var(--sdo-fw-heavy); color: var(--sdo-ink); }
.sdo-modal .u-modal-close { width: 36px; height: 36px; border-radius: 50%; font-size: var(--sdo-fs-xl); color: var(--sdo-ink-muted); }
.sdo-modal .u-modal-close:hover { background: var(--sdo-surface-soft); }
.sdo-modal .u-modal-body { overflow-y: auto; padding: var(--sdo-sp-24); }
.sdo-modal .u-modal-footer { padding: var(--sdo-sp-16) var(--sdo-sp-24); border-top: 1px solid var(--sdo-line-soft); }

/* ── 약관 시트 ── */
/* 조각 sdo_user/_policy_popup.jsp — 모양·높이 = .sdo-modal(서류 모달과 같은 판 · 내용만큼 · 상한을 넘으면 본문 스크롤) · 여기는 폭만 */
#policySheetOverlay .u-modal { width: 94%; max-width: 680px; }

/* ── 약관 본문 ── */
/* 조각 _policy_detail.jsp(L1 이 저장한 정제 HTML) — 시트·단독 화면 같은 글꼴 · 단독 화면의 옅은 상자는 pages/policy.css */
.sdo-policy-body { overflow-x: auto; word-break: break-word; font-size: var(--sdo-fs-sm); line-height: 1.8; color: var(--sdo-ink-sub); }
.sdo-policy-body p { margin: 0 0 var(--sdo-sp-8); }
.sdo-policy-body h1, .sdo-policy-body h2, .sdo-policy-body h3 { margin: var(--sdo-sp-16) 0 var(--sdo-sp-8); font-weight: var(--sdo-fw-heavy); color: var(--sdo-ink); }
.sdo-policy-body ul { list-style: disc; padding-left: var(--sdo-sp-20); margin: 0 0 var(--sdo-sp-8); }
.sdo-policy-body ol { list-style: decimal; padding-left: var(--sdo-sp-20); margin: 0 0 var(--sdo-sp-8); }
.sdo-policy-body table { width: 100%; margin: var(--sdo-sp-8) 0 var(--sdo-sp-12); }
.sdo-policy-body th, .sdo-policy-body td { border: 1px solid var(--sdo-line); padding: var(--sdo-sp-8); text-align: left; vertical-align: top; }
.sdo-policy-body img { height: auto; }
.sdo-policy-body th { background: var(--sdo-surface-soft); color: var(--sdo-ink); font-weight: var(--sdo-fw-bold); }

/* ── 알림·확인 팝업 ── */
/* RN.alert·RN.confirm·flash — 마크업·엔진 = user_modal.js · L2 모양의 한 자리(L1 = base/rn_modal.css · 셸마다 한 벌 · core/shell CONTRACT.md §2-D-13)
   PC = 가운데 카드 · 모바일 = 아래 시트(user-mobile/user_mobile.css) · 아이콘 색 = user_modal.js 가 쓰는 --u-success·--u-danger(user_variables.css 가 L2 값으로) */
#rnModalOverlay { position: fixed; inset: 0; z-index: 10100; display: flex; align-items: center; justify-content: center; background: var(--sdo-scrim); }
#rnModalOverlay .rn-modal { width: 90%; max-width: 400px; padding: var(--sdo-sp-32) var(--sdo-sp-24) var(--sdo-sp-24); border-radius: var(--sdo-radius-lg); background: var(--sdo-surface); box-shadow: var(--sdo-shadow-card-hover); overflow: hidden; text-align: center; animation: sdo-dialog-in .2s ease; }
@keyframes sdo-dialog-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
#rnModalOverlay .rn-m-icon { padding-bottom: var(--sdo-sp-12); font-size: var(--sdo-ic-2xl); line-height: 1; }
#rnModalOverlay .rn-m-title { font-size: var(--sdo-fs-xl); font-weight: var(--sdo-fw-heavy); letter-spacing: -0.4px; color: var(--sdo-ink); }
/* 공백 없는 긴 문자열(URL·파일명)은 여기서 끊는다 — 안 끊으면 카드(overflow:hidden) 밖으로 잘린다 */
#rnModalOverlay .rn-m-msg { padding-top: var(--sdo-sp-8); font-size: var(--sdo-fs-md); line-height: 1.6; color: var(--sdo-ink-sub); overflow-wrap: anywhere; word-break: break-word; }
#rnModalOverlay .rn-m-field { padding-top: var(--sdo-sp-16); }
#rnModalOverlay .rn-m-input { width: 100%; height: var(--sdo-input-h); padding: 0 var(--sdo-sp-16); border: 1px solid var(--sdo-line); border-radius: var(--sdo-radius); background: var(--sdo-surface-soft); font-family: inherit; font-size: var(--sdo-fs-md); color: var(--sdo-ink); }
#rnModalOverlay .rn-m-input:focus { outline: none; border-color: var(--sdo-accent); background: var(--sdo-surface); box-shadow: 0 0 0 3px var(--sdo-accent-line); }
#rnModalOverlay .rn-m-actions { display: flex; gap: var(--sdo-sp-8); margin-top: var(--sdo-sp-24); }
#rnModalOverlay .rn-m-btn { flex: 1; height: var(--sdo-btn-h); border: 0; border-radius: var(--sdo-radius); background: var(--sdo-line-soft); color: var(--sdo-ink-sub); font-family: inherit; font-size: var(--sdo-fs-md); font-weight: var(--sdo-fw-bold); cursor: pointer; transition: background .1s; }
#rnModalOverlay .rn-m-btn:hover { background: var(--sdo-line); }
#rnModalOverlay .rn-m-btn.primary { background: var(--sdo-accent); color: var(--sdo-on-accent); }
#rnModalOverlay .rn-m-btn.primary:hover { background: var(--sdo-accent-hover); }
#rnModalOverlay .rn-m-btn.danger { background: var(--sdo-danger); color: var(--sdo-on-accent); }
#rnModalOverlay .rn-m-btn.danger:hover { background: var(--sdo-danger-hover); }