/*
  Pay app CSS — 모바일 우선 (mobile-first).
  1차 타겟: 스마트폰 360~430px
  2차 타겟: 8인치 태블릿 768~800px
  3차 (보조): PC 1024px+

  shipping.css와 같은 디자인 토큰/클래스 패턴을 공유 (페이지간 결합도는
  파일 분리로 차단). 향후 디자인 분기 필요 시 prefix 도입.
*/

:root {
  --color-bg: #fafafa;
  --color-bg-card: #ffffff;
  --color-bg-secondary: #f3f5f7;
  --color-bg-pressed: #eef0f3;
  --color-bg-accent-soft: #eaf2fb;
  --color-text: #1a1a1a;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-accent: #042C53;
  --color-accent-pressed: #063a6b;
  --color-border: #e5e7eb;
  --color-border-input: #d1d5db;
  --color-section-deposit-bg: #eff6ff;
  --color-section-deposit-border: #bfdbfe;
  --color-section-orders-bg: #ffffff;
  --color-section-memo-bg: #f9fafb;
  --color-section-memo-border: #e5e7eb;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-card: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.1);
  --tap-min: 44px;     /* Apple HIG 권장 터치 타겟 최소 */
  --gap-tap: 8px;      /* 버튼 사이 최소 간격 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  /* 가로 스크롤 절대 차단 — 모바일 사용성 핵심 */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: #f5f7fa;
  color: var(--color-text);
  font-size: 16px;       /* 모바일 본문 16px (가독성 + iOS 자동 줌 방지) */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;  /* iOS 기본 회색 깜빡임 제거 */
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ─── 페이지 레이아웃 ─────────────────────────── */
.shipping-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 32px 16px 48px;     /* 상단 32px (nav 아래 여백 통일), 좌우 16px */
}
@media (min-width: 768px) {
  .shipping-wrap {
    max-width: 960px;
    padding: 32px 24px 64px;   /* 상단 32px 통일, 좌우 24px */
  }
}

/* ─── 헤더 ─────────────────────────────────── */
.page-header {
  display: flex;
  flex-direction: column;
  gap: 16px;                        /* 윗줄(.page-header-top) ↔ 아랫줄(title) */
  margin-bottom: 76px;
}
/* pay-list 전용 — title ↔ Check List 간격을 ← 회차 목록 ↔ title 시각 간격(약 22px)에 맞춤.
   page-header gap(16px) + title line-box 위 여백(~6px) = 22px이 백링크↔타이틀 시각 거리.
   여기에 약간의 여유 더해 24px로 설정 (양쪽 시각 균형).
   pay(회차 목록)는 카드 리스트 위 여백이 76px이라 그대로 유지. */
.page-header-detail { margin-bottom: 24px; }
.page-header-top {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);       /* 44px — pay/pay-list 양쪽 동일 윗줄 높이 */
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: #1e2d3d;              /* nav와 동일 — ULive 남색 */
  border: 1px solid #1e2d3d;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  min-height: var(--tap-min);
  transition: background-color 0.15s, border-color 0.15s;
}
.page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
  text-align: center;
}
/* Payment Confirmation 시스템 명칭 — ULive OrderFlow 헤더 폰트/색상 패턴 응용. */
.page-title-pay {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 24px;
}
.page-title-pay .pay-word { color: #1e2d3d; }
.page-title-pay .pay-word-accent { color: #3498db; }
@media (min-width: 768px) {
  .page-header { margin-bottom: 84px; }
  .page-header-detail { margin-bottom: 24px; }    /* 모바일과 동일 — 24px로 일관 유지 */
  .page-title { font-size: 20px; }
  .page-title-pay { font-size: 32px; }
}

/* ─── 버튼 ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  min-height: var(--tap-min);
  min-width: 56px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  background: var(--color-bg-pressed);
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.btn-primary:active {
  background: var(--color-accent-pressed);
}

/* ─── 회차 카드 목록 ────────────────────────── */
.session-list {
  display: flex;
  flex-direction: column;              /* 세로 리스트 — 카드 1개당 한 행 */
  gap: 14px;
}

/* 시안 2 (Toss 모던) 톤 적용 — radius 16 / padding 22×24 / 더 깊은 2단 그림자.
   진행중 카드(.is-active)는 좌측 4px 그라데이션 bar + 옅은 파란 tint 배경. */
.session-card {
  position: relative;                   /* is-active::before 좌측 bar 기준 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--color-bg-card);
  border: 1px solid #eef0f3;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
  overflow: hidden;                     /* is-active::before 좌측 bar 둥근 처리 */
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s, border-color 0.18s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.session-card.is-active {
  background: #f8fbff;
  border-color: #dbeafe;
}
.session-card.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
}
/* 좌측 정보 — 시안 2 column form (title-row 위 / time 아래). */
.session-card-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;                         /* flex item shrink 허용 (긴 타이틀 wrap 안전) */
}
/* 타이틀 + 진행중 뱃지 한 줄 (좁아지면 wrap). */
.session-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* 우측 stat 그룹 — 4개 column stat 가로 배치, 좁아지면 wrap. */
.session-card-counts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
}
/* 모바일 터치 피드백 */
.session-card:active {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
}
/* hover는 PC(마우스) 환경에만 적용 — 시안 2 톤 (더 깊은 그림자 + -3px lift). */
@media (hover: hover) and (pointer: fine) {
  .session-card:hover {
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 18px 36px rgba(15, 23, 42, 0.10);
    transform: translateY(-3px);
    border-color: #dbeafe;
  }
  .btn:hover { background: var(--color-bg-secondary); }
  .btn-primary:hover { background: var(--color-accent-pressed); }
  .back-link:hover {
    background: #0f1d2d;
    border-color: #0f1d2d;
  }
  .import-trigger-bar .btn:hover {
    background: #2980b9;
    border-color: #2980b9;
  }
}
.session-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.session-card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.3px;
  word-break: keep-all;
}
.session-card-time {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.session-card-subtitle {
  font-size: 14px;
  color: var(--color-accent);
  font-weight: 600;
}
/* 진행중 뱃지 — 시안 2 톤 (그라데이션 pill + 흰 dot pulse).
   pay.js는 항상 'session-card-status active' 형태로 마크업 → .active 분기는 호환성으로 보존. */
.session-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 9px;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;                /* 한글 — 시안 2 영문 0.4px보다 좁게 */
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}
.session-card-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
  animation: session-card-status-pulse 1.6s infinite;
}
@keyframes session-card-status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.session-card-status.active {
  /* pay.js 마크업 호환성 — 별도 변화 없음 (.session-card-status 단독으로 진행중 의미). */
}

/* ─── 회차 카드 stat 4개 (시안 2 column form) ───────────────
   pay 전용. 라벨 위 / 숫자 아래 (사용자 결정 — 시안 2 원본 반대).
   기존 .count-pill*은 pay-list 헤더 inline 표시용이라 그대로 보존. */
.session-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.1;
}
.session-stat .num {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.session-stat .lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.85;
}
.session-stat-all     { background: #f3f4f6; color: #4b5563; }
.session-stat-paid    { background: #d1fae5; color: #065f46; }
.session-stat-pending { background: #fef3c7; color: #b45309; }
/* shipping 페이지 신규 — 완료(초록, paid 톤 동일) / 부분(주황) / 대기(노랑). */
.session-stat-shipped { background: #d1fae5; color: #065f46; }
.session-stat-partial { background: #ffedd5; color: #c2410c; }
.session-stat-waiting { background: #fef9c3; color: #a16207; }
.session-stat-memo            { background: #ea580c; color: #ffffff; }
.session-stat-memo.is-empty {
  background: #ffffff;
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border-input);
}
/* memo는 라벨 자리에 이모지가 옴 — 폰트 살짝 키움 */
.session-stat-memo .lbl-icon {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

/* shipping ?debug=1 — 카드 아래 paid 닉네임 리스트 (디버그 모드 전용). */
.shipping-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shipping-debug-list {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
  padding: 6px 10px;
  background: #f9fafb;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  word-break: break-all;
  font-family: 'Consolas', 'Menlo', monospace;
}

/* ─── pay-list 헤더 ────────────────────────── */
.list-header {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.list-header-date,
.list-header-title {
  font-size: 20px;
  font-weight: 700;
  word-break: keep-all;
}
.list-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.list-header-title-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}
.list-header-title-group .list-header-badge {
  margin-right: 16px;          /* gap 16 + margin 16 = badge ↔ date 32px */
}
.list-header-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #d1d5db;
  background: rgba(0,0,0,0.04);
  color: #6b7280;
  white-space: nowrap;
}
.list-header-badge.active {
  background: rgba(46,204,113,0.15);
  border-color: #2ecc71;
  color: #2ecc71;
}
.list-header-counts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.count-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.count-pill strong { font-weight: 800; }
.count-pill-all     { background: #f3f4f6; color: #4b5563; }
.count-pill-pending { background: #fef3c7; color: #b45309; }
.count-pill-paid    { background: #d1fae5; color: #065f46; }
/* 비고 pill — pay-list memo-modal-btn 정책 동등.
   1건+: orange-600 강조 톤 (memo-modal-btn 활성과 같은 색).
   0건: 흰 배경 + border ghost 톤 (memo-modal-btn.is-empty와 같은 정책).
   크기/padding/radius는 다른 count-pill과 통일 (위 .count-pill 베이스). */
.count-pill-memo            { background: #ea580c; color: #ffffff; }
.count-pill-memo.is-empty {
  background: #ffffff;
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border-input);
}
.count-pill-memo.is-empty strong { color: #6b7280; }

/* ─── 확인 사항 모달 진입 버튼 (list-header 위 새 row) ──── */
.list-header-action-row {
  display: flex;
  justify-content: flex-end;          /* 우측 정렬 — pill row 우측 끝과 X 정렬 */
  margin-bottom: 12px;                /* 아래 list-header-row와 시각 분리 */
}
.memo-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;                  /* pill 모서리에 맞춰 좌우 padding 확보 */
  min-height: 36px;
  border: 1px solid #c2410c;          /* orange-700 border */
  border-radius: 999px;               /* pill — .count-pill / .list-header-badge와 통일 */
  background: #ea580c;                /* orange-600 — pill의 soft 톤보다 강한 채도, "처리 안건 있음" 강조 */
  color: #ffffff;
  font-size: 15px;                    /* pill 14px보다 살짝 크게 (강조) */
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(194, 65, 12, 0.25);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.memo-modal-btn:hover {
  background: #c2410c;                /* orange-700 — 한 단계 어둡게 */
  box-shadow: 0 3px 6px rgba(194, 65, 12, 0.35);
}
.memo-modal-btn:active {
  transform: scale(0.97);
}
.memo-modal-btn-icon { font-size: 15px; line-height: 1; }
.memo-modal-btn-label { line-height: 1.2; }
.memo-modal-btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #7c2d12;                /* orange-900 — pill 안에서 카운트 강조 */
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
/* 0건 disabled 톤 — 클릭은 가능 (C3에서 빈 모달 표시), 시각만 회색.
   박스 밖 페이지 배경(#f5f7fa)과 부딪힘 — 흰 배경 + 1.5px border로 가독성 확보 (ghost 버튼). */
.memo-modal-btn.is-empty {
  background: #ffffff;
  border: 1.5px solid var(--color-border-input);
  color: var(--color-text-muted);
  box-shadow: none;
}
.memo-modal-btn.is-empty:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  box-shadow: none;
}
.memo-modal-btn.is-empty .memo-modal-btn-badge {
  background: #d1d5db;
  color: #6b7280;
}

/* ─── 검색 (placeholder UI) ──────────────────── */
.search-filter-bar {
  display: flex;
  gap: var(--gap-tap);
  margin-bottom: 12px;
}
.search-input {
  flex: 1;
  padding: 12px 16px;
  min-height: var(--tap-min);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  font-size: 16px;        /* iOS 자동 줌 방지 */
  color: var(--color-text);
}
.search-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-color: var(--color-accent);
}
.search-input:disabled {
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── 필터 탭 ─────────────────────────────── */
.filter-tabs {
  display: flex;
  gap: var(--gap-tap);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-tabs .btn {
  flex: 1;
  min-width: 0;       /* flex 줄어들 때 min-width:56 제약 풀어 모바일에서도 3개 한 줄 */
}

/* ─── placeholder 영역 ──────────────────────── */
.placeholder-area {
  background: var(--color-bg-card);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-secondary);
}
.placeholder-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.placeholder-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  word-break: keep-all;
}

/* ─── 공통 알림 (.notice) ─ pick.css 패턴 차용 ─ */
.notice {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin: 12px 0;
  word-break: keep-all;
}
.notice-error   { background: #FCEBEB; color: #d32f2f; }
.notice-info    { background: #E6F1FB; color: #1976d2; }
.notice-success { background: #E6F4EA; color: #388e3c; }

/* ─── 빈 상태 ─────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-secondary);
}
.empty-state-icon { font-size: 36px; margin-bottom: 8px; }
.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-text);
}
.empty-state-desc {
  font-size: 14px;
  word-break: keep-all;
}

/* ─── 로딩 ───────────────────────────────── */
.loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-secondary);
  font-size: 15px;
}

/* ─── pay-list: 좌우 분할 (PC 우선) ────────────── */
.pay-split {
  display: grid;
  grid-template-columns: 1fr;          /* 모바일 기본: 1컬럼 */
  gap: 16px;
  align-items: start;
}
@media (min-width: 768px) {
  .pay-split {
    grid-template-columns: 30fr 70fr;   /* fr 단위로 gap 차감 후 비례 분배 — overflow 방지 */
    gap: 20px;
  }
}

.pay-pane-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;       /* grid 컬럼 안에서 자식 input/text overflow 방지 */
}
.pay-pane-right {
  min-width: 0;
}
@media (min-width: 768px) {
  .pay-pane-right {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 16px;
    box-shadow: var(--shadow-card);
  }
}

/* ─── 닉네임 카드 목록 (좌측 패널) ─────────────── */
.nickname-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* PC에서 긴 목록 스크롤 가능 */
}
@media (min-width: 768px) {
  .nickname-list {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
  }
}
.nickname-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
  background: var(--color-bg-card);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}
.nickname-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  text-align: left;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background-color 0.1s, border-color 0.1s, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.nickname-card:active {
  background: var(--color-bg-pressed);
}
@media (hover: hover) and (pointer: fine) {
  .nickname-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card-hover);
  }
}
.nickname-card.selected {
  border-color: var(--color-accent);
  background: var(--color-bg-accent-soft);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
}
.nickname-card-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nickname-card-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.nickname-card-name {
  font-size: 15px;
  font-weight: 700;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}
.nickname-card-progress {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-left: 22px;     /* 아이콘 폭만큼 들여쓰기 */
}
.nickname-card.status-paid .nickname-card-icon { /* ✅ */ }
.nickname-card.status-partial .nickname-card-icon { /* 🟡 */ }
.nickname-card.status-pending .nickname-card-icon { /* ⏳ */ }

/* 모바일: 카드 안 inline 디테일 영역 */
.nickname-card-detail {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.nickname-card-detail[hidden] { display: none; }
@media (min-width: 768px) {
  /* PC: 카드 안 inline 디테일은 사용 안 함 (우측 패널이 처리) */
  .nickname-card-detail { display: none !important; }
}

/* ─── 디테일 영역 (우측 패널 또는 모바일 inline) ── */
.detail-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-secondary);
}
@media (max-width: 767px) {
  /* 모바일에선 우측 패널 자체 숨김 */
  .pay-pane-right { display: none; }
}
.detail-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-title {
  font-size: 18px;
  font-weight: 700;
  word-break: break-all;
}
.detail-summary {
  font-size: 14px;
  color: var(--color-text-secondary);
}
.detail-summary strong {
  color: var(--color-text);
}
.detail-summary-pending {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #FCEBEB;
  color: #d32f2f;
  font-weight: 600;
  font-size: 13px;
}

.detail-actions {
  display: flex;
  gap: var(--gap-tap);
  flex-wrap: wrap;
}
.detail-actions .btn {
  flex: 1;
  min-width: 120px;
}

/* ─── 주문 행 ─────────────────────────────── */
.order-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.order-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
}
.order-row.paid {
  background: #F1F8F4;
  border-color: #c7e6d4;
}
.order-row.gift {
  background: #FFF8E5;
  border-color: #f0dfa6;
}
.order-row-label {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
}
.order-row.paid .order-row-label,
.order-row.gift .order-row-label {
  cursor: default;
}
.order-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.order-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-row-product {
  font-size: 14px;
  font-weight: 600;
  word-break: break-all;
}
.order-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.order-row-amount {
  font-weight: 600;
  color: var(--color-text);
}
.order-row-tag {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.order-row-tag.paid-tag {
  background: #d1fae5;
  color: #065f46;
}
.order-row-tag.gift-tag {
  background: #fde68a;
  color: #78350f;
}
.order-row-undo {
  flex-shrink: 0;
  /* 되돌리기 = 주의 액션 빨간 outline. notice-error 톤(#d32f2f)과 일관. */
  background: #fff;
  border: 1px solid #d32f2f;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  color: #d32f2f;
  cursor: pointer;
  white-space: nowrap;
}
.order-row-undo:hover {
  background: #FCEBEB;
  border-color: #d32f2f;
  color: #d32f2f;
}

/* ─── 비고 ────────────────────────────────── */
.memo-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.memo-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.memo-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text);
  resize: vertical;
  min-height: 64px;
}
.memo-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-color: var(--color-accent);
}
.memo-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;       /* [비고 저장] 우측 정렬. saved(1500ms toast)도 함께 우측 — markup 순서대로 button 좌측 / saved 우측. */
  gap: var(--gap-tap);
}
.memo-actions .btn {
  min-width: 100px;
}
.memo-saved {
  font-size: 13px;
  color: #388e3c;
  font-weight: 600;
}

/* ─── 엑셀 가져오기 (1B-1) ──────────────────── */
.import-trigger-bar {
  /* 좌측 패널 상단, 검색바 위. */
  margin-bottom: var(--gap-tap);
}
.import-trigger-bar .btn {
  width: 100%;
  background: #3498db;             /* ULive 파랑 — nav active 동색 */
  color: #ffffff;
  border-color: #3498db;
}
.import-trigger-bar .btn:active {
  background: #1f6391;
  border-color: #1f6391;
}

/* 모달 (pick의 패턴 차용 + pay 토큰으로 정렬) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: relative;
  background: var(--color-bg);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 600px) {
  .modal-content {
    width: 92%;
    max-width: 720px;
    height: 90vh;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}
.modal-close {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s, border-color 0.15s;
}
.modal-close:hover {
  background: #f5f7fa;
  border-color: var(--color-border-input);
}
.modal-close:active { transform: scale(0.96); }
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── 확인 사항 모달 (Check List) — 테이블 + 인라인 펼침 ───── */
.memo-modal-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.memo-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  /* table-layout: auto — 닉네임 컬럼이 content에 맞춰 자동 확장 (긴 닉도 줄바꿈 X). */
}
/* 셀 사이 경계선 (그리드 룩) — th/td 모두 1px. */
.memo-modal-table th,
.memo-modal-table td {
  border: 1px solid var(--color-border);
  padding: 10px;
  vertical-align: middle;
  text-align: center;                /* 헤더/데이터 기본 중앙 — 일반 UX 표준 */
}
.memo-modal-table thead th {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 2px solid var(--color-border-input);    /* 헤더↔바디 구분 강조 */
}
.memo-modal-row:hover td { background: #fafbfc; }
.memo-modal-row.expanded td { background: #f5f8fa; }
/* 닉네임/상태 컬럼 폭 — 컨텐츠에 딱 맞추지 않고 여유 둠 (min-width + 좌우 padding 강화).
   짧은 닉네임/짧은 pill도 답답함 없이 표시. nth-child로 th까지 함께 적용. */
.memo-modal-table th:nth-child(1),
.memo-modal-table td:nth-child(1) {
  min-width: 120px;
  padding-left: 16px;
  padding-right: 16px;
}
.memo-modal-table th:nth-child(2),
.memo-modal-table td:nth-child(2) {
  min-width: 120px;
  padding-left: 16px;
  padding-right: 16px;
}
/* 닉네임 — 좌측 정렬 + 줄바꿈 X + 클릭으로 닉네임 카드 이동.
   hover underline + accent 색으로 클릭 가능 단서 제공. */
.memo-modal-nick {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s;
}
.memo-modal-nick:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.memo-modal-status-cell { white-space: nowrap; }       /* 상태 셀 줄바꿈 X */
.memo-modal-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
/* count-pill-pending / count-pill-paid와 동일 톤 */
.memo-modal-status-pending { background: #fef3c7; color: #b45309; }
.memo-modal-status-paid    { background: #d1fae5; color: #065f46; }
/* shipping Check List — 출고 상태 3색 (.ship-status-* 색과 일관). */
.memo-modal-ship-shipped   { background: #d1fae5; color: #065f46; }
.memo-modal-ship-partial   { background: #ffedd5; color: #c2410c; }
.memo-modal-ship-waiting   { background: #fef9c3; color: #a16207; }
/* 비고 — 좌측 정렬 + 남은 공간 차지 + ellipsis (max-width:0 trick으로 auto-layout 환경 ellipsis 보장). */
.memo-modal-memo-cell {
  text-align: left;
  width: 100%;
  max-width: 0;
  cursor: pointer;
}
.memo-modal-memo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memo-modal-action-cell { white-space: nowrap; }
.memo-modal-detail-btn {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}
.memo-modal-detail-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-input);
}
/* 펼침 행 — 가독성 위해 배경 분리 + padding */
.memo-modal-expand td { padding: 0; background: var(--color-bg-secondary); text-align: left; }
.memo-modal-expand-content {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.memo-modal-expand-summary {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}
.memo-modal-expand-orders {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text);
}
.memo-modal-expand-orders li.is-gift { color: var(--color-text-muted); }

/* 엑셀 가져오기 모달 — 입력 영역 */
.import-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-tap);
}
.import-controls label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  min-width: 56px;
}
.import-bank-select {
  flex: 0 0 140px;
  padding: 10px 12px;
  min-height: var(--tap-min);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  font-size: 16px;
  color: var(--color-text);
}
.import-file-input {
  flex: 1;
  min-width: 180px;
  font-size: 14px;
}
.import-controls .btn {
  flex-shrink: 0;
  min-width: 100px;
}
.import-status {
  font-size: 13px;
  color: var(--color-text-secondary);
  min-height: 18px;
}
.import-status.error { color: #d32f2f; }
.import-status.ok { color: #388e3c; }

.import-result-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* 매칭 결과 영역 검색 바 — sticky. 입금자명 + 닉네임 통합 필터 (3섹션 모두 영향). */
.import-search-bar {
  position: sticky;
  top: 0;                              /* modal-body padding 안 viewport 상단 (modal-header 직하). */
  z-index: 5;
  display: flex;
  gap: var(--gap-tap);
  padding: 8px 0;
  margin: -8px 0 0;                    /* sticky 시 상단 갭 최소화 */
  background: var(--color-bg);         /* modal-content 배경과 동일 — 스크롤 시 카드 가림 */
  border-bottom: 1px solid var(--color-border);
}
.import-search-bar .search-input {
  min-width: 0;                        /* 모바일 좁은 폭에서 shrink 허용 */
}
.import-search-bar .btn-clear {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
}

/* 매칭 결과 3섹션 (Pay-1B-3a) */
.import-match-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.match-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  padding: 12px 14px;
}
.match-section-matched     { border-left: 4px solid #388e3c; }
.match-section-needconfirm { border-left: 4px solid #f9a825; }
.match-section-notfound    { border-left: 4px solid #d32f2f; }
.match-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-tap);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.match-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
.match-count {
  font-weight: 800;
  color: var(--color-accent);
}
.match-section-info {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.match-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.match-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.match-item.processed {
  opacity: 0.55;
  background: #eef7ef;
}
.match-item-tx {
  display: flex;
  flex-direction: column;
  flex: 1 1 200px;
  min-width: 0;
  gap: 2px;
}
.match-item-date {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.match-item-amount {
  font-weight: 700;
  color: var(--color-text);
}
.match-item-content {
  color: var(--color-text);
  word-break: break-all;
}
.match-item-arrow {
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.match-item-target {
  display: flex;
  flex-direction: column;
  flex: 1 1 200px;
  min-width: 0;
  gap: 2px;
}
.match-item-nick {
  font-weight: 700;
  color: var(--color-accent);
  word-break: break-all;
}
.match-item-product {
  color: var(--color-text-secondary);
  font-size: 12px;
  word-break: break-all;
}
.match-item-process-btn {
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
}
.match-item-processed-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #d1fae5;
  color: #065f46;
}

/* ─── 매칭 결과 수동 처리 (Pay-1B-3b) ──────────── */
.manual-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.match-item-manual {
  list-style: none;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
}
.match-item-manual.processed {
  opacity: 0.55;
  background: #eef7ef;
}
.manual-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.manual-tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 200px;
  min-width: 0;
}
.manual-toggle {
  flex-shrink: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.manual-toggle:hover { background: var(--color-bg-pressed); }
.manual-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manual-detail[hidden] { display: none; }

.manual-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

/* 닉네임 라디오 (duplicate-nickname) */
.manual-nick-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.manual-nick-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.manual-nick-list label:hover { background: var(--color-bg-pressed); }

/* 닉네임 입력 + 추천 (notFound) */
.manual-nick-input {
  width: 100%;
  padding: 10px 12px;
  min-height: 40px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  font-size: 16px; /* iOS 자동 줌 방지 */
  color: var(--color-text);
}
.manual-nick-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-color: var(--color-accent);
}
.manual-suggest-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.manual-suggest-list li {
  display: inline-flex;
}
.manual-suggest-list button {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.manual-suggest-list button:hover { background: var(--color-bg-pressed); }
.manual-suggest-empty {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* 상품 체크박스 */
.manual-product-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.manual-product-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.manual-product-list label:hover { background: var(--color-bg-pressed); }
.manual-product-name {
  flex: 1;
  word-break: break-all;
}
.manual-product-amount {
  flex-shrink: 0;
  font-weight: 600;
}
.manual-product-empty {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 4px 8px;
}

/* 선물 행 — 매칭 풀 외 시각 표시 전용 (체크박스 X, 클릭 X). 사용자가 "선물 주문 있다"는
   사실을 인지할 수 있게 보여주되, 처리 시엔 expandTargetsWithGifts cascade로 자동 paid. */
.manual-product-list li.manual-product-row-gift {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  opacity: 0.75;
  cursor: not-allowed;
}
.manual-product-gift-icon {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
  font-size: 14px;
}
.manual-product-row-gift .manual-product-amount {
  color: var(--color-text-muted);
}

/* 선택 합계 + diff */
.manual-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.manual-selected-amount {
  font-weight: 700;
  color: var(--color-text);
}
.manual-amount-diff {
  font-weight: 600;
}
.manual-amount-diff.match { color: #388e3c; }
.manual-amount-diff.over  { color: #d32f2f; }
.manual-amount-diff.under { color: #f9a825; }

.manual-process-btn {
  align-self: flex-end;
  min-width: 140px;
}

/* ─── needConfirm 그룹 카드 (Pay-1B-3b 그룹핑 추가) ──────────── */
.match-item-group .manual-tx {
  /* 그룹 카드 요약 — 닉네임 + 거래 카운트가 한 줄에 baseline 정렬 */
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.match-item-group .match-item-nick {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
}
.manual-group-tx-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.manual-group-tx-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0;
  align-items: baseline;
}
.manual-group-tx-item .match-item-date {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
}
.manual-group-tx-item .match-item-amount {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--color-text);
}
.manual-group-tx-item .match-item-content {
  flex: 1 1 auto;
  word-break: break-all;
  color: var(--color-text);
}

/* ─── 영역 라벨 + 시각 구분 박스 ──────────────── */
.section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
  padding: 0 0 6px;
  letter-spacing: 0.02em;
}
.deposit-section {
  background: var(--color-section-deposit-bg);
  border: 1px solid var(--color-section-deposit-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.orders-section {
  background: var(--color-section-orders-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 10px;
}
.memo-section {
  background: var(--color-section-memo-bg);
  border: 1px solid var(--color-section-memo-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   shipping-list 전용 (Step 2). pay-list와 같은 contentArea 구조 +
   .ship-split modifier로 모바일 화면 전환(전체 풀스크린) 패턴.
   ═══════════════════════════════════════════════════════════════════ */

/* 헤더 카운트 pill — shipping 4개 (전체/완료/부분/대기). pay-list 헤더 inline pill 톤 재활용. */
.count-pill-shipped { background: #d1fae5; color: #065f46; }
.count-pill-partial { background: #ffedd5; color: #c2410c; }
.count-pill-waiting { background: #fef9c3; color: #a16207; }

/* 4탭 필터 — flex-wrap 허용 (좁은 폭에서 2x2). */
.ship-filter-tabs .btn { flex: 1 1 calc(50% - var(--gap-tap)); min-width: 0; }
@media (min-width: 768px) {
  .ship-filter-tabs .btn { flex: 1; }
}

/* 모바일 — 기본은 좌측 패널만 풀스크린. .mobile-show-detail 토글 시 우측 풀스크린 + back 버튼. */
@media (max-width: 767px) {
  /* shipping-list contentArea — 좌우 한쪽만 표시. pay-list와 다른 패턴 (사용자 사양). */
  .ship-split { display: block; }
  .ship-split .pay-pane-left { display: block; }
  .ship-split .pay-pane-right { display: none; }
  .ship-split.mobile-show-detail .pay-pane-left { display: none; }
  .ship-split.mobile-show-detail .pay-pane-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .ship-back-mobile {
    align-self: flex-start;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    min-height: var(--tap-min);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ship-back-mobile:active { background: var(--color-bg-pressed); }
}
@media (min-width: 768px) {
  /* PC — pay-list 패턴 그대로 grid 분할. back 버튼 hide. */
  .ship-back-mobile { display: none; }
}

/* 닉네임 카드 (shipping 전용 modifier — 상단 row + 하단 진행률 행). */
.ship-card { padding: 12px; }
.ship-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ship-card-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  margin-left: 0;            /* progress 텍스트는 자체 padding 없음 */
}
/* 진행 텍스트 (shipped/total · 합계) — pay-list 재활용 .nickname-card-progress
   margin-left:22px이라 좌측 indent. shipping은 indent X. */
.ship-card .nickname-card-progress {
  margin-left: 0;
  flex-shrink: 0;
}

/* 상태 배지 — 닉네임 카드 좌측 + 디테일 헤더 진행 태그 색상 토큰. */
.ship-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.ship-status-shipped { background: #d1fae5; color: #065f46; }
.ship-status-partial { background: #ffedd5; color: #c2410c; }
.ship-status-waiting { background: #fef9c3; color: #a16207; }

/* 진행률 바 (닉네임 카드 우측 작은 바) */
.ship-progress-bar {
  display: inline-block;
  flex: 1;
  min-width: 60px;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.ship-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.2s;
}
.ship-progress-shipped { background: #10b981; }
.ship-progress-partial { background: #f97316; }
.ship-progress-waiting { background: #d1d5db; }     /* 거의 안 보임 — width 0 */

/* 디테일 헤더 진행 태그 (총 N건 옆) */
.ship-progress-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.ship-progress-tag-shipped { background: #d1fae5; color: #065f46; }
.ship-progress-tag-partial { background: #ffedd5; color: #c2410c; }
.ship-progress-tag-waiting { background: #fef9c3; color: #a16207; }

/* N차 출고 박스 (shipments 그룹) */
.ship-batch-section {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 4px solid #10b981;       /* 완료 톤 좌측 강조 */
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 10px;
}
.ship-batch-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
}
.ship-batch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--color-text);
}
.ship-batch-item-name {
  flex: 1;
  word-break: break-all;
}
.ship-batch-item-meta {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.ship-batch-item.is-gift { color: var(--color-text-muted); }
/* 출고 취소 버튼 — payment의 .order-row-undo와 같은 톤 (red outline ghost). */
.ship-batch-undo {
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #d32f2f;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #d32f2f;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s;
}
.ship-batch-undo:hover { background: #FCEBEB; }
.ship-batch-undo:active { background: #FAD9D9; }

/* shipping Step 3 — 사진 placeholder (Step 4에서 활성화), 토스트, 출고 확인 모달. */
.ship-photo-placeholder {
  margin-top: 10px;
  padding: 18px 14px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 600;
  cursor: not-allowed;
}

/* 토스트 — 화면 하단 가운데 잠시 떴다 사라짐. body 직속 fixed. */
.ship-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  padding: 12px 22px;
  background: #1f2937;
  color: #ffffff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition: opacity 0.18s, transform 0.18s;
}
.ship-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 출고 확인 모달 — 작은 사이즈 (.modal 베이스 재활용). */
.modal-content-small {
  width: 92%;
  max-width: 420px;
  height: auto;
  max-height: 80vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 600px) {
  /* 기본 .modal-content @media는 max-width: 720px / height: 90vh — 작은 모달은 별도 우선. */
  .modal-content-small { width: 92%; max-width: 420px; height: auto; max-height: 80vh; }
}
.ship-confirm-msg {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 18px;
  word-break: keep-all;
}
.ship-confirm-actions {
  display: flex;
  gap: var(--gap-tap);
  justify-content: flex-end;
}
.ship-confirm-actions .btn { min-width: 88px; }

/* ─── shipping Step 4 — 사진 영역 (1차 출고 박스 안) ────────── */
.ship-batch-divider {
  margin: 12px 0 10px;
  border: none;
  border-top: 1px dashed var(--color-border);
}
.ship-photo-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ship-photo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ship-photo-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
}
.ship-photo-count { color: var(--color-text); font-weight: 800; }
.ship-photo-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ship-photo-add {
  position: relative;
  cursor: pointer;
  font-size: 13px;
  padding: 6px 12px;
  min-height: 36px;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}
.ship-photo-add input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.ship-photo-add.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ship-photo-add.is-disabled input[type="file"] { pointer-events: none; cursor: not-allowed; }
.ship-photo-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ship-photo-thumb {
  position: relative;
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  cursor: pointer;
}
.ship-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ship-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ship-photo-remove:hover { background: rgba(0, 0, 0, 0.85); }
/* 업로드 진행률 — 진행 바 width 0→100% */
.ship-photo-thumb.ship-photo-uploading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  cursor: default;
}
.ship-photo-progress {
  width: 80%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.ship-photo-progress-fill {
  height: 100%;
  background: var(--color-accent);
  width: 0%;
  transition: width 0.15s;
}
/* 업로드 실패 — 재시도 버튼 노출 */
.ship-photo-thumb.ship-photo-error {
  background: #fef2f2;
  border-color: #fecaca;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.ship-photo-retry {
  background: #ffffff;
  border: 1px solid #d32f2f;
  color: #d32f2f;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
}
.ship-photo-retry:hover { background: #FCEBEB; }

/* 라이트박스 — 전체화면 검은 배경 + 가운데 사진 + 좌우 화살표 + 닫기. */
.ship-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: rgba(0, 0, 0, 0.92);
  display: flex;                     /* style.display = 'flex'로 토글 */
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.ship-lightbox-img {
  max-width: 90vw;
  max-height: 86vh;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ship-lightbox-close,
.ship-lightbox-prev,
.ship-lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: none;
  cursor: pointer;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s;
}
.ship-lightbox-close:hover,
.ship-lightbox-prev:hover,
.ship-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.25);
}
.ship-lightbox-close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}
.ship-lightbox-prev,
.ship-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  font-size: 32px;
  line-height: 1;
  border-radius: 8px;
}
.ship-lightbox-prev { left: 12px; }
.ship-lightbox-next { right: 12px; }
.ship-lightbox-counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 14px;
  border-radius: 999px;
}
@media (max-width: 480px) {
  .ship-lightbox-prev, .ship-lightbox-next {
    width: 40px;
    height: 56px;
    font-size: 28px;
  }
  .ship-lightbox-prev { left: 6px; }
  .ship-lightbox-next { right: 6px; }
}

/* ─── shipping Check List 모달 — 펼침 영역 (상품별 출고 + 사진 매수). ─── */
.ship-checklist-orders {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text);
}
.ship-checklist-orders li {
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  word-break: keep-all;
}
.ship-checklist-orders li.is-shipped {
  color: var(--color-text-muted);
  background: var(--color-bg-card);
}
.ship-checklist-orders li.is-pending {
  color: #b45309;
  background: #fffbeb;
  font-weight: 600;
}
.ship-checklist-goto {
  align-self: flex-start;
  margin-top: 8px;
}

/* Check List 비고/이슈 컬럼 안 '⚠️ 사진 누락' 강조 (주황). */
.ship-checklist-issue-photo-missing {
  color: #c2410c;
  font-weight: 700;
  white-space: nowrap;
}