/* L2 모바일(≤980px) 한 파일 — 셸 머리가 페이지 CSS 다음에 싣는다
   모바일 = 시안 앱 느낌 — 위 제목줄(뒤로 · 로고 · 제목) · 아래 하단 탭 · 하단 고정 큰 버튼 · 카드 1열
   화면 고유 모바일 모양은 그 화면 pages/*.css 의 @media 에 둔다 · 색·크기 = user_variables.css 토큰만 */

@media (max-width: 980.98px) {

  /* ── 제목줄 ── */
  /* 메뉴·앱 이름 글자 대신 뒤로 · 화면 제목 · 로고 그림(오른쪽 끝 · order) */
  .sdo-topbar { position: fixed; left: 0; right: 0; }
  .sdo-topbar-inner { height: var(--sdo-topbar-h-mo); gap: var(--sdo-sp-8); padding: 0 var(--sdo-sp-8); }
  .sdo-brand { order: 1; flex: none; padding-right: var(--sdo-sp-8); }
  .sdo-brand-name,
  .sdo-nav { display: none; }
  .sdo-topbar-title {
    display: block; flex: 1; min-width: 0;
    padding-left: var(--sdo-sp-12);
    font-size: var(--sdo-fs-lg); font-weight: var(--sdo-fw-heavy); letter-spacing: -0.3px; color: var(--sdo-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sdo-topbar-back {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
    font-size: 1.5rem; color: var(--sdo-ink);
  }
  .sdo-topbar-back ~ .sdo-topbar-title { padding-left: 0; }

  /* ── 본문 여백 ── */
  /* 제목줄 아래 · 하단 탭(body.sdo-has-tab) 위 */
  .sdo-main { padding-top: var(--sdo-topbar-h-mo); padding-bottom: calc(var(--sdo-sp-24) + env(safe-area-inset-bottom, 0px)); }
  body.sdo-has-tab .sdo-main { padding-bottom: calc(var(--sdo-tab-h) + var(--sdo-sp-24) + env(safe-area-inset-bottom, 0px)); }
  .sdo-container { padding: 0 var(--sdo-sp-20); }

  /* ── 하단 탭 ── */
  .sdo-bottom-tab { display: flex; }
  .sdo-footer { display: none; }

  /* ── 띠·머리 ── */
  /* 간격만 좁게 · 머리 띠 제목은 모바일에도 그린다(마이 «내 발주» 왼쪽 · 동작 버튼 오른쪽 — 사용자 결정) · PC 만 쓰는 화면은 JSP 가 u-pc */
  .sdo-band { padding: var(--sdo-sp-20) 0; }
  .sdo-band-head { padding: var(--sdo-sp-20) 0 var(--sdo-sp-16); }
  .sdo-page-sub { font-size: var(--sdo-fs-sm); }
  .sdo-section-title { font-size: var(--sdo-fs-lg); }
  .sdo-detail-title { font-size: var(--sdo-fs-xl); }

  /* ── 하단 고정 큰 버튼 ── */
  /* 표지 is-fixed 가 있는 버튼 줄만 화면 아래 고정 · 하단 탭이 있으면 그 위 · 없으면 맨 아래 · 버튼 크기는 모든 버튼 줄 같음 */
  .sdo-cta-bar.is-fixed {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    margin: 0;
    padding: var(--sdo-sp-12) var(--sdo-sp-20) calc(var(--sdo-sp-12) + env(safe-area-inset-bottom, 0px));
    background: var(--sdo-surface);
    border-top: 1px solid var(--sdo-line-soft);
  }
  body.sdo-has-tab .sdo-cta-bar.is-fixed { bottom: calc(var(--sdo-tab-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--sdo-sp-12); }
  .sdo-cta-bar .sdo-btn { flex: 1; height: var(--sdo-cta-h); border-radius: var(--sdo-radius-lg); font-size: var(--sdo-fs-lg); }
  .sdo-cta-bar .sdo-btn-ghost { flex: 0 0 auto; padding: 0 var(--sdo-sp-20); }
  .sdo-main:has(.sdo-cta-bar.is-fixed) { padding-bottom: calc(var(--sdo-cta-h) + var(--sdo-sp-48) + env(safe-area-inset-bottom, 0px)); }
  body.sdo-has-tab .sdo-main:has(.sdo-cta-bar.is-fixed) { padding-bottom: calc(var(--sdo-tab-h) + var(--sdo-cta-h) + var(--sdo-sp-48) + env(safe-area-inset-bottom, 0px)); }

  /* ── 키보드가 열린 동안 ── */
  /* 화면 아래 고정 줄(하단 탭 · 고정 큰 버튼)을 숨긴다(위저드 버튼 줄 = feature/user_wizard.css) — 표지 = user_modal.js body[data-rn-kb] · 다음·조회 = 키보드 «다음/이동» 키 · 키보드를 닫으면 다시 보인다 */
  body[data-rn-kb="Y"] .sdo-bottom-tab,
  body[data-rn-kb="Y"] .sdo-cta-bar.is-fixed { display: none; }

  /* ── 폼 ── */
  /* 입력칸 한 등급의 모바일 값(위저드·본인 확인 같음 · 글씨 18px — 16px 아래면 iOS 가 초점 때 화면을 확대한다) */
  .sdo-field { margin-bottom: var(--sdo-sp-20); }
  .sdo-label { font-size: var(--sdo-fs-wz-text-mo); }
  .sdo-input { height: var(--sdo-input-h-lg-mo); font-size: var(--sdo-fs-wz-item-mo); }

  /* ── 상세 줄 ── */
  /* 이름 칸 좁게 */
  .sdo-kv-row dt { flex-basis: 96px; }

  /* ── 모달 ── */
  /* 아래에서 올라오는 판 · 서류 모달·약관 시트 한 모양(.sdo-modal) · 약관 시트 크기만 #policySheetOverlay */
  .sdo-modal { align-items: flex-end; }
  .sdo-modal .u-modal {
    width: 100%; max-width: 100%; max-height: 88vh; max-height: 88dvh;
    border-radius: var(--sdo-radius-lg) var(--sdo-radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: sdo-sheet-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #policySheetOverlay .u-modal { width: 100%; max-width: 100%; }
  .sdo-modal .u-modal::before {
    content: ''; flex-shrink: 0;
    width: 40px; height: 4px; margin: var(--sdo-sp-8) auto 2px;
    background: var(--sdo-line); border-radius: 2px;
  }
  .sdo-modal .u-modal-header { padding: var(--sdo-sp-8) var(--sdo-sp-20) var(--sdo-sp-4); border-bottom: none; }
  .sdo-modal .u-modal-body { padding: var(--sdo-sp-8) var(--sdo-sp-20); }
  .sdo-modal .u-modal-footer { padding: var(--sdo-sp-8) var(--sdo-sp-20) var(--sdo-sp-16); border-top: none; }
  @keyframes sdo-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* ── 알림·확인 팝업 ── */
  /* 아래 시트(PC 모양 = user_components.css) · 아이콘 없이 제목·문구 왼쪽 · 큰 버튼 */
  #rnModalOverlay { align-items: flex-end; }
  #rnModalOverlay .rn-modal { width: 100%; max-width: 100%; padding: var(--sdo-sp-8) var(--sdo-sp-24) calc(var(--sdo-sp-24) + env(safe-area-inset-bottom, 0px)); border-radius: var(--sdo-radius-lg) var(--sdo-radius-lg) 0 0; text-align: left; animation: sdo-sheet-up .28s cubic-bezier(.32,.72,0,1); }
  #rnModalOverlay .rn-modal::before { content: ""; display: block; width: 40px; height: 4px; margin: 6px auto var(--sdo-sp-16); border-radius: 2px; background: var(--sdo-line); }
  #rnModalOverlay .rn-m-icon { display: none; }
  #rnModalOverlay .rn-m-btn { height: var(--sdo-cta-h); border-radius: var(--sdo-radius-lg); font-size: var(--sdo-fs-lg); font-weight: var(--sdo-fw-heavy); }
  #rnModalOverlay #rnModalCancel { flex: 0.55; }
}