/* ════════════════════════════════════════════════════
   발주 현황 뷰 (#poView·#poDetailView·#poNewView) — SPA 편입본 (이슈 #88)
   · 대시보드 셸(main.container) 안에서 다른 뷰(#stockView 등)와 동일한
     .section / .section-title-row / .btn / .field / .modal-card / .cap 결을 그대로 차용.
   · 색·간격·반경·그림자는 common.css 토큰만 사용(신규 팔레트 발명 금지).
   · 신규 클래스는 전부 po- 접두어로 스코프(발주현황_화면시안.md §0-8).
   · 라이트 테마 전용. 반응형 분기점은 ≤1023px(태블릿)·≤639px(모바일) 둘뿐.

   ⚠ stk-hidden / stk-card / stk-map-form / stk-refresh 재사용에 대한 메모:
   화면시안이 이 클래스들을 마크업에 "그대로" 쓰라고 하지만, 그 정의는
   stock.css에서 전부 #stockView로 스코프돼 있어 #poView·#poDetailView·
   #poNewView 아래에선 먹지 않는다. 그래서 아래에서는 같은 값(토큰·간격)을
   po- 뷰 ID로 다시 스코프해 "패턴만 복제"한다 — stock.css의 #stockView
   정의는 건드리지 않으므로 선택자 오염이 없다.
   ════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   ⓪ 재고/발주 탭 — #stockView 최상단(재고 현황 ↔ 발주 현황), #poView 밖.
   static/css/finance.css의 .fin-tabs/.fin-tab(손익/원장 탭) 정의를 값 그대로
   복제 — 새 디자인 아님. 팀장 지시로 po.css에 넣되 스코프는 #stockView.
   ──────────────────────────────────────────────── */
#stockView .stk-tabs {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-pill); margin: 0 0 14px;
}
#stockView .stk-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 16px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  transition: background .12s ease, color .12s ease;
}
#stockView .stk-tab:hover { color: var(--text-2); }
#stockView .stk-tab.is-active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
#stockView .stk-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ⛔ 뷰 전환 규칙 — switchView("po")가 .container에 view-po를 붙이면
   다른 뷰 섹션을 숨기고 발주현황 하위 3개 섹션만 남긴다(stock.css:16 패턴과 동일). */
.container.view-po > .section:not(#poView):not(#poDetailView):not(#poNewView),
.container.view-po > #bannerSlot,
.container.view-po > #emptySlot {
  display: none;
}
#poView, #poDetailView, #poNewView { display: block; }
#poView[hidden], #poDetailView[hidden], #poNewView[hidden] { display: none; }

/* ────────────────────────────────────────────────
   ① 헤더 액션 3버튼([?]·새로고침·+ 발주 등록) 높이·중심 통일 (사용자 실측 지적)
   기준은 .btn-primary(+ 발주 등록)의 실제 높이 = padding 11px×2 + border 2px + line-box(14px·1.45)
   ≈ 44px. 44px는 common.css 모바일 전역 규칙 .btn{min-height:44px}와 정확히 같은 값이라
   ≤639px에서 별도 분기 없이도 그대로 맞는다(추가 미디어쿼리 불필요).
   ──────────────────────────────────────────────── */
#poView .section-title-actions { display: flex; align-items: center; gap: 8px; }
#poView .section-title-actions .btn { height: 44px; box-sizing: border-box; }

/* [?] 도움말 — .btn .btn-ghost 그대로, 정원(正圓)으로: width=height(44px), padding:0으로
   좌우 여백 제거(찌그러짐 원인이었던 .btn 기본 좌우 padding 14px를 없앰) */
.po-help-btn {
  width: 44px; height: 44px; aspect-ratio: 1 / 1;
  padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}

/* ────────────────────────────────────────────────
   ② 입고 예정 (#poView) — 상태 메시지 · 카드 리스트 · 미정 그룹 · 최근 입고
   ──────────────────────────────────────────────── */
/* 상태 메시지 — .stk-msg 결 그대로 */
#poView .po-msg { min-height: 0; margin: 0 0 12px; font-size: 12.5px; color: var(--text-2); }
#poView .po-msg:empty { display: none; }
/* 에러 문구 옆 [다시 시도] 버튼 — .btn .btn-ghost 그대로, 메시지 한 줄 안에 들어가도록 여백만 축소(§8) */
#poView .po-msg-retry { margin-left: 8px; padding: 3px 10px; font-size: 11.5px; vertical-align: 1px; }

/* 새로고침 버튼 — stk-refresh 패턴 복제(아이콘 회전은 common.css 전역 spin 재사용) */
#poView .stk-refresh { flex: 0 0 auto; width: auto; gap: 6px; white-space: nowrap; }
#poView .stk-refresh svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
#poView .stk-refresh.is-loading svg { animation: spin .8s linear infinite; }
#poView .stk-refresh[disabled] { opacity: .6; cursor: default; }

/* 카드 리스트 — 흰 카드 한 장 안에 행마다 구분선(stk-card 결) */
#poView .po-list {
  display: flex; flex-direction: column;
  margin: 0 0 20px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
#poView .po-list:empty { display: none; }
/* 날짜 미정 그룹의 리스트는 확정 일정과 톤을 낮춰 구분(경고 아님 — 그림자 대신 테두리) */
#poView .po-list--pending { box-shadow: none; border: 1px solid var(--line); }

/* 로딩 문구 — po.js가 카드 대신 #poIncomingList(.po-list) 안에 임시로 꽂는 한 줄(§8).
   .po-list 흰 카드 안에서 카드 한 행만큼의 여백감을 주기 위해 자체 패딩을 가짐. */
#poView .po-loading { margin: 0; padding: 32px 18px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }

#poView .po-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s ease;
}
#poView .po-card:last-child { border-bottom: none; }
#poView .po-card:hover { background: var(--surface-3); }

/* 날짜 칩 — 좌측 고정폭. 배경은 확정/미정 모두 중립 --surface-2로 통일(미정=경고 아님을 색으로도 표시) */
#poView .po-card-date {
  flex: 0 0 52px; width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
#poView .po-card-day {
  font-size: 13px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap;
}
#poView .po-card--pending .po-card-day { color: var(--muted); font-weight: 600; }

#poView .po-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* 제품명+배지 한 행 — 좁으면 배지가 아래로 줄바꿈(강제 nowrap 금지, 시안 §9) */
#poView .po-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#poView .po-card-product {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#poView .po-card-desc { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
#poView .po-card-meta { margin: 0; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 날짜 미정 건 안내 2줄(§2·po.js:299-300) — meta보다 눈에 들어오되 제품명·배지보다는 약하게.
   전역 정의(#poView 카드·#poDetailView 스테퍼 양쪽에서 재사용 — po-badge와 같은 방식).
   여기 margin:0은 #poView 맥락 기준(po-card-body가 이미 flex column gap:4px라 중복 여백 방지).
   #poDetailView 스테퍼 안에서 쓸 때의 여백은 아래 ④ 스테퍼 섹션에서 국소 오버라이드한다. */
.po-card-wait { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-2); line-height: 1.5; }
.po-card-hint { margin: 0; font-size: 12.5px; font-weight: 400; color: var(--text-2); line-height: 1.5; }

/* 날짜 미정 그룹 */
#poView .po-group { margin: 0 0 20px; }
#poView .po-group-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: -.01em; }
#poView .po-group .po-list { margin-bottom: 0; }

/* 최근 입고 — 실제 마크업(index.html:1223-1228)은
     <details class="stk-hidden po-recent"><summary>(클래스 없음, 텍스트+.stk-hidden-badge만)</summary>
     <div class="po-list po-list--recent">…</div></details>
   이전엔 존재하지 않는 stk-hidden-sum/-title/-chev·po-recent-list(grid)를 스타일했던 게
   버그였다(마커 노출·배지 이질감·카드 이중 경계 전부 이 셀렉터 불일치 때문). summary는
   클래스가 없어 엘리먼트 셀렉터로 직접 걸고, 목록은 .po-list를 그대로 쓰되(중복 클래스)
   .po-recent 자체가 이미 흰 카드이므로 안쪽에서는 그림자·반경을 죽여 "카드 하나"로 만든다. */
#poView .po-recent {
  margin-top: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
#poView .po-recent[hidden] { display: none; }

/* summary — 카드 헤더 행. 네이티브 마커 제거 + 화살표는 HTML에 엘리먼트가 없어 CSS로 직접 그림 */
#poView .po-recent summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  cursor: pointer; user-select: none; list-style: none;
  font-size: 13px; font-weight: 700; color: var(--text-2);
}
#poView .po-recent summary::-webkit-details-marker { display: none; }
#poView .po-recent summary::marker { content: ""; }
#poView .po-recent summary:hover { background: var(--surface-2); }
#poView .po-recent summary::after {   /* 화살표(닫힘=아래) — 대상 엘리먼트가 없어 border 코너로 그림 */
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease;
}
#poView .po-recent[open] summary::after { transform: rotate(-135deg); }   /* 열림=위 */

#poView .po-recent .stk-hidden-badge {
  font-size: 11.5px; font-weight: 700; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 1px 8px; font-variant-numeric: tabular-nums;
}

/* 목록 — .po-list 기본(흰 배경·그림자·반경)은 .po-recent가 이미 담당하므로 여기서 무효화하고
   summary와 경계만 선 하나로 구분(카드 하나로 보이게, 사용자 지적 ①-4) */
#poView .po-recent .po-list--recent {
  margin: 0; background: transparent; box-shadow: none; border-radius: 0; overflow: visible;
  border-top: 1px solid var(--line);
}

/* 항목 — .po-card의 축소판. 왼쪽부터 날짜·제품명·수량·발주번호가 자연스럽게 이어지고
   (name에 flex-grow를 주지 않아 오른쪽으로 억지로 밀리지 않는다), 완료 배지는 이제 안 쓴다
   (이미 "최근 입고" 섹션 안이라 완료가 자명함 — po-js가 마크업에서 제거) */
#poView .po-recent-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}
#poView .po-recent-item:last-child { border-bottom: none; }
#poView .po-recent-date {
  flex: 0 0 auto; width: 34px;
  font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}
#poView .po-recent-name {
  flex: 0 1 auto; min-width: 0;
  font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#poView .po-recent-qty { flex: 0 0 auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 발주번호 — 더 이상 배지가 아니라 po-card-meta와 같은 톤의 평범한 텍스트(po.js:337 po-recent-po) */
#poView .po-recent-po { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ────────────────────────────────────────────────
   ③ 상태 배지 (§5 매핑표 + 협의중·발주넣음 2종) — 목록·상세 공통. pill 모양, 신규 색 없음.
   6단계가 왼→오른쪽으로 "옅음→진함→색"으로 읽히도록: 점선 테두리(가장 이름) →
   옅은 테두리 채움 → 무테두리 회색 채움(공장 준비 중, 기존과 동일) → 이후 색 배지.
   ──────────────────────────────────────────────── */
.po-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.po-badge--negotiating { color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); }  /* 🤝 협의 중 — 아직 확정 아님 */
.po-badge--ordered { color: var(--muted); background: var(--surface-3); border: 1px solid var(--line); }            /* 📦 발주 넣음 — 확정, 아직 안 움직임 */
.po-badge--factory { color: var(--muted); background: var(--surface-2); }         /* 🏭 공장 준비 중 */
.po-badge--ship    { color: var(--brand); background: var(--sage-tint); }        /* 🚢 배 타는 중 */
.po-badge--customs { color: #8A5A10; background: #FBF0D8; }                      /* 🛃 세관 통과하고 있어요 (stk-alert 앰버 톤) */
.po-badge--done    { color: var(--pos); background: var(--pos-bg); }             /* ✅ 도착함 */
.po-badge--warn    { color: var(--neg-strong); background: var(--neg-bg); }      /* ⚠ 확인이 필요해요 */

/* ────────────────────────────────────────────────
   ④ 발주 상세 (#poDetailView) — 목록으로 · 헤더 · 스테퍼 · 서류
   ──────────────────────────────────────────────── */
#poDetailView .po-back {
  margin-bottom: 14px;
  border: none; background: transparent;
  padding: 4px 2px; color: var(--text-2); font-size: 13px; font-weight: 600;
}
#poDetailView .po-back:hover { color: var(--brand); background: transparent; }

#poDetailView .po-detail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 4px;
}
#poDetailView .po-detail-title {
  margin: 0; font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
/* .cap(공용) 위에 강조만 덧입힘 — .cap 정의 자체는 건드리지 않음(같은 우선순위, 로드 순서로 승리) */
#poDetailView .po-detail-total { font-size: 13px; font-weight: 700; color: var(--text-2); }
#poDetailView .po-detail-sub { margin: 0 0 18px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 스테퍼 카드 — stk-card 톤(흰 면+반경+그림자)을 po-batch-card로 직접 구현
   (markup의 stk-card 클래스는 #stockView 스코프라 여기선 비활성 — po-batch-card가 실질 스타일 담당) */
#poDetailView .po-batch-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 4px 20px;
  overflow: hidden;
}
#poDetailView .po-batch-list { list-style: none; margin: 0; padding: 0; }

/* 세로 연결선 + 점 — "여정" 시각화. 점은 좌측 20px 고정폭, 텍스트는 자연 흐름(인라인)으로 오른쪽에. */
#poDetailView .po-batch-item {
  position: relative;
  padding: 16px 0 16px 34px;
}
#poDetailView .po-batch-dot {
  position: absolute; left: 0; top: 16px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line-strong);   /* 기본(대기) — 테두리만, 채움 없음 */
  background: var(--surface);
  z-index: 1;
}
/* 연결선 — 항목 높이 전체에 깔되, 첫 항목은 위쪽(점 중심 26px)부터, 마지막 항목은 점 중심(26px)까지만 */
#poDetailView .po-batch-item::before {
  content: "";
  position: absolute; left: 9px; top: 0; bottom: 0;
  width: 2px; background: var(--line);
}
#poDetailView .po-batch-item:first-child::before { top: 26px; }
#poDetailView .po-batch-item:last-child::before { bottom: calc(100% - 26px); }
#poDetailView .po-batch-item.is-done::before { background: var(--pos); }
#poDetailView .po-batch-item.is-done .po-batch-dot { border-color: var(--pos); background: var(--pos); }
#poDetailView .po-batch-item.is-active .po-batch-dot { border-color: var(--brand); background: var(--brand); }

#poDetailView .po-batch-no { display: inline-block; margin-right: 10px; font-size: 13.5px; font-weight: 700; color: var(--text); }
/* 차수 다음으로 중요한 정보 — 배지·날짜보다 먼저 눈에 들어오게 --text/700(팀장 지시).
   display:inline-block인데 white-space는 기본값(normal)이라 여러 품목 나열로 길어지면
   li 안(패딩 34px 이후)에서 자연 줄바꿈된다 — 점(.po-batch-dot)·연결선은 li 박스 기준
   top:0/bottom:0(+ first/last 26px 보정)이라 li가 몇 줄이 되든 정렬이 흔들리지 않는다. */
#poDetailView .po-batch-qty { display: inline-block; margin-right: 10px; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
#poDetailView .po-batch-item .po-badge { margin-right: 10px; vertical-align: 1px; }
#poDetailView .po-batch-date { display: inline-block; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
#poDetailView .po-batch-ref { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
/* 날짜 미정 차수 안내 2줄(.po-card-wait/.po-card-hint, 전역 정의는 위 ②에 있음) — 스테퍼 li는
   po-card-body의 flex gap:4px가 없는 일반 블록 흐름이라 여백만 국소로 얹는다(전역 정의 불변). */
#poDetailView .po-batch-item .po-card-wait { margin: 6px 0 0; }
#poDetailView .po-batch-item .po-card-hint { margin: 4px 0 0; }

/* 수정 버튼 — 차수 줄(no/badge/date)과 같은 인라인 흐름에 끼워 넣는 작은 .btn .btn-ghost(po.js:430).
   min-height는 ID+클래스 결합이라 common.css 모바일 .btn{min-height:44px}보다 우선해 인라인 크기 유지. */
#poDetailView .po-batch-edit {
  display: inline-flex; align-items: center; vertical-align: 1px; margin-right: 10px;
  padding: 2px 10px; font-size: 11px; min-height: 0;
}

/* 인라인 수정 폼(§3) — 스테퍼 li 안에서 펼쳐진다. li의 좌측 34px 패딩·점 위치는 그대로 두고
   배경만 얹어 "편집 중" 영역을 표시 — margin으로 li 박스를 옮기면 점(.po-batch-dot)의
   left:0 기준이 같이 밀려 연결선이 어긋나므로 절대 margin-left를 건드리지 않는다. */
#poDetailView .po-batch-item--editing {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding-bottom: 18px;
}
#poDetailView .po-batch-edit-form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
/* 라벨은 .po-field-hint(전역, 원래는 옅은 힌트문구용)를 재사용하지만 이 폼 안에서는
   실제 입력 라벨 역할이라 .field label 톤(진하게)으로 국소 오버라이드 — 전역 정의는 그대로 둠 */
#poDetailView .po-batch-edit-form .po-field-hint { display: block; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
#poDetailView .po-batch-edit-status,
#poDetailView .po-batch-edit-hint,
#poDetailView .po-batch-edit-wait {
  display: block; width: 100%; margin-top: 5px;
  font: inherit; font-size: 13px; color: var(--text);
  padding: 7px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface);
}
#poDetailView .po-batch-edit-hint::placeholder,
#poDetailView .po-batch-edit-wait::placeholder { color: var(--muted); }
#poDetailView .po-batch-edit-status:focus-visible,
#poDetailView .po-batch-edit-hint:focus-visible,
#poDetailView .po-batch-edit-wait:focus-visible {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--sage-tint);
}
/* 취소/저장 — .po-form-actions(전역, 등록폼과 공유) 기본 여백은 폼 자체 gap:10px와 중복돼 축소 */
#poDetailView .po-batch-edit-form .po-form-actions { margin-top: 0; }
/* 버튼 자체는 .btn .btn-ghost/.btn-primary 그대로 쓰되, 인라인 폼 규모에 맞춰 여백만 축소 */
#poDetailView .po-batch-edit-cancel,
#poDetailView .po-batch-edit-save { padding: 7px 14px; font-size: 12.5px; }

/* 서류 */
#poDetailView .po-detail-docs { margin-top: 22px; }
#poDetailView .po-detail-docs-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--text-2); }
#poDetailView .po-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#poDetailView .po-doc-list a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; font-size: 13px; color: var(--brand); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
#poDetailView .po-doc-list a:hover { background: var(--sage-tint); border-color: var(--sage-tint-2); }

/* ────────────────────────────────────────────────
   ⑤ 발주 등록 폼 (#poNewView)
   ──────────────────────────────────────────────── */
/* 인셋 카드형 폼 — stk-map-form 패턴 복제(#stockView 스코프라 여기선 새로 정의).
   .field/.field input/.modal-actions은 common.css 전역이라 자동 적용됨(중복 정의 없음). */
#poNewView .stk-map-form {
  margin-top: 0; padding: 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
}

/* 라벨 옆 [?] 도움말 아이콘 — 사이드바 [data-tip] 다크 툴팁과 동일 컴포넌트를 재사용(로직 복제, 위치만 상단) */
.po-help-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 4px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--muted);
  font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help; vertical-align: middle;
}
.po-help-ico:hover { border-color: var(--brand); color: var(--brand); }
.po-help-ico[data-tip] { position: relative; }
.po-help-ico[data-tip]:hover::after,
.po-help-ico[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 240px;
  background: var(--text); color: #fff;
  padding: 6px 10px; border-radius: 6px;
  font-size: 11.5px; font-weight: 500; line-height: 1.4; white-space: normal; text-align: left;
  box-shadow: var(--shadow-pop); pointer-events: none; z-index: 60;
}

.po-field-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* 폼 버튼 줄 — .modal-actions(공용) 위에 우측 정렬 + 자연폭으로만 조정(기본은 균등 flex:1) */
.po-form-actions { justify-content: flex-end; margin-top: 18px; }
.po-form-actions .btn { flex: 0 0 auto; width: auto; }

/* 제출 후 상태 3종 — 하나만 노출(JS가 hidden 토글) */
.po-form-status { margin: 14px 0 0; padding: 14px 16px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.6; }
.po-form-status[hidden] { display: none; }
.po-form-status p { margin: 0 0 6px; }
.po-form-status p:last-child { margin-bottom: 0; }
.po-form-status--loading { display: flex; align-items: center; gap: 8px; background: var(--surface-2); color: var(--text-2); }
.po-form-status--ok { background: var(--pos-bg); color: var(--pos); }
.po-form-status--fallback { background: #FBF0D8; color: #8A5A10; }   /* stk-alert와 동일 앰버 톤 */

.po-form-preview-line { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* 스피너 — 신규 애니메이션 금지, common.css 전역 spin 키프레임 재사용(공용 @keyframes spin) */
.po-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--line-strong); border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: -2px;
}

/* ────────────────────────────────────────────────
   ⑥ 온보딩 — 첫 진입 투어(말풍선). po.js가 DOM을 동적으로 만든다(고정 마크업 없음):
        body > .po-tour-overlay > .po-tour-card(.po-tour-step/.po-tour-text/.po-tour-actions)
      데스크톱 앵커 모드 — overlay는 투명·클릭 통과(카드 밖 화면은 그대로 조작 가능),
        카드만 JS가 인라인 top/left(px)로 대상 옆에 배치.
      중앙 모드(.po-tour-overlay--center — 모바일 ≤639 또는 대상이 없는 1단계) —
        overlay가 modal-overlay와 동일한 딤(dim) 톤으로 전체를 덮고 카드를 가운데 배치.
   ──────────────────────────────────────────────── */
.po-tour-overlay {
  position: fixed; inset: 0; z-index: 130;
  pointer-events: none;   /* 앵커 모드에선 카드 밖 화면을 그대로 조작 가능해야 함 */
}
.po-tour-overlay[hidden] { display: none; }
.po-tour-overlay--center {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(26,29,33,.42);   /* modal-overlay와 동일 딤 톤 — 신규 색 아님 */
}

.po-tour-card {
  position: fixed;   /* 앵커 모드 기본값 — JS가 top/left(px)를 인라인으로 지정 */
  /* ⛔ .po-tour-spot(z:129)보다 반드시 위여야 한다. z-index를 빼면 auto가 되어
     스포트라이트의 거대한 box-shadow(딤)가 설명 카드까지 덮어 글씨가 어두워진다.
     (2026-07-22 사용자 지적으로 발견 — 정작 읽어야 할 안내문이 가려졌다) */
  z-index: 131;
  pointer-events: auto;
  width: calc(100% - 40px); max-width: 300px;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 16px 18px;
  animation: mcIn .16s ease;   /* common.css의 modal-card 등장 키프레임 재사용(신규 애니메이션 아님) */
}
/* 중앙 모드는 overlay가 이미 flex로 가운데 정렬 — 카드는 인라인 top/left 없이 흐름대로 */
.po-tour-overlay--center .po-tour-card { position: static; }
@media (prefers-reduced-motion: reduce) { .po-tour-card { animation: none; } }

.po-tour-step { margin: 0 0 6px; font-size: 11px; font-weight: 700; color: var(--brand); letter-spacing: .02em; }
.po-tour-text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.po-tour-text strong, .po-tour-text b { color: var(--text); }

/* 화살표 꼬리(선택 요소) — 카드가 가리키는 방향 표시. 위치는 JS가 상황별 top/left 인라인으로 조정. */
.po-tour-card .po-tour-arrow {
  position: absolute; left: 24px; bottom: -7px;
  width: 14px; height: 14px;
  background: var(--surface);
  transform: rotate(45deg);
  box-shadow: 2px 2px 4px rgba(16,24,40,.06);
}

.po-tour-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.po-tour-actions .btn { flex: 0 0 auto; width: auto; }

/* 현재 가리키는 대상 요소(날짜칩·배지·+발주등록 버튼 등) 하이라이트.
   스포트라이트(.po-tour-spot) 도입 후엔 주변이 이미 어두워져 구멍 자체로 강조가 되므로
   기존의 --sage-tint 글로우(box-shadow)는 과해서 뺐다(사용자 지적) — 테두리만 유지. */
.po-tour-target {
  position: relative; z-index: 131;
  outline: 2px solid var(--brand); outline-offset: 3px;
  border-radius: 8px;
}

/* 스포트라이트 — 대상 위치·크기(getBoundingClientRect)는 po.js가 인라인 top/left/width/height로
   지정한다(여기선 값 없이 스타일만). 거대한 box-shadow 스프레드로 "구멍 뚫린 딤"을 만드는 기법
   — 딤 색은 .modal-overlay·.po-tour-overlay--center와 같은 rgba(26,29,33,…) 톤(새 색 아님).
   대상이 없는 중앙 모드(--center)에선 po.js가 이 엘리먼트를 만들지 않는다. */
.po-tour-spot {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(26,29,33,.55);
  pointer-events: none;
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
  z-index: 129;   /* .po-tour-overlay/.po-tour-card(130)보다 아래, 일반 페이지 콘텐츠보다는 위 */
}
.po-tour-spot[hidden] { display: none; }

/* ────────────────────────────────────────────────
   ⑦ 빈 상태 (§8)
   ──────────────────────────────────────────────── */
.po-empty { padding: 48px 24px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.po-empty .btn { margin-top: 14px; width: auto; }

/* ────────────────────────────────────────────────
   ⑧ 반응형 — ≤1023(태블릿) · ≤639(모바일), 기존 전역 기준과 통일
   ──────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* 카드형은 그대로, 폭만 축소(시안 §9) — 좌우 패딩만 소폭 정리 */
  #poView .po-card { padding: 13px 16px; }
  #poDetailView .po-batch-card { padding: 4px 16px; }
}

@media (max-width: 639px) {
  #poView .stk-refresh-lbl { display: none; }
  #poView .stk-refresh { padding: 8px 11px; }
  /* .po-help-btn/.section-title-actions .btn은 데스크톱에서 이미 44px로 고정돼 있어
     여기서 별도 재정의 불필요(common.css 모바일 .btn{min-height:44px}와도 값이 같다) */

  /* 스테퍼 — 차수 라벨을 첫 줄로 분리해 수량·배지·날짜가 다음 줄로 스택(시안 §9) */
  #poDetailView .po-batch-no { display: block; margin: 0 0 4px; }

  /* 온보딩 투어 — 모바일에서 중앙 모드(.po-tour-overlay--center)로 전환하는 판단은
     po.js가 담당(대상 없는 1단계는 데스크톱에서도 동일 모드 사용). 여기서는 카드 폭만 소폭 정리. */
  .po-tour-card { max-width: 320px; }
}

/* end of po.css */